html - 我怎样才能垂直移动第二条线,减少它和它上面的线之间的空间?

标签 html css

我尝试使用各种 CSS 属性(例如 margin-toppadding)来减少两行文本之间的垂直间距,但似乎没有任何效果。

这两行看起来是这样的:

enter image description here

我希望它们靠得更近一些,这样它们就几乎要接触了。但是,无论我如何处理 margin-top 属性,这都是不够的,最终会导致事情变得更糟。

这是 CSS 和 HTML:

<style>
.jumbotronjr {
  padding: 12px;
  margin-bottom: -16px;
  font-size: 21px;
  font-weight: 200;
  line-height: 2.1428571435;
  color: inherit;
  background-color: white;
}
.titletext {
    font-size: 2.8em;
    color: darkgreen;
    font-family: Candara, Calibri, Cambria, serif;
    margin-left: -32px;
}
.titletextjr {
    font-size: 1.4em;
    color: darkgreen;
    font-family: Candara, Calibri, Cambria, serif;
    margin-left: -32px;   
}
</style>
</head>


<body>
<div class="container body-content">
<div class="jumbotronjr">
    <div class="col-md-3" style="margin-top: 1cm">
        <img src="http://www.proactusa.com/wp-content/themes/proact/images/pa_logo_notag.png" alt="PRO*ACT usa logo">
        </div>
    <div class="col-md-9">
        <label class="titletext" style="margin-top: 0.1cm;">eServices Reporting</label>
    <br/>
        <label class="titletextjr" style="margin-top: -2cm;">Purchasing Report for RB Kitchen</label>
    </div>
</div>

我需要做哪些更改或添加才能使这些线靠得更近(具体来说,第二条线垂直向上移动)?

最佳答案

它们之间有很大的空间,因为您的 .jumbotronjr 类有一个 line-height: 2.1428571435;。删除它,它将删除文本之间的空格。

.jumbotronjr {
  padding: 12px;
  margin-bottom: -16px;
  font-size: 21px;
  font-weight: 200;
  line-height: 2.1428571435; /* <--- Remove this */
  color: inherit;
  background-color: white;
}

JSFiddle

关于html - 我怎样才能垂直移动第二条线,减少它和它上面的线之间的空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38446172/

相关文章:

html - 删除 Bootstrap 3 中导航栏按钮的边框

javascript - 解决 Firefox 不传递文件路径的问题

html - 使用 font-awesome 将小图标堆叠在大图标上

html - 如果文本很长,Firefox 35.0 会切断标题工具提示

jquery - 在菜单中添加灯箱等背景

javascript - 具有交替滚动边的视差分屏

javascript - 如何制作进度条

javascript - 使用 prefixfree.js 时看不到渐变

javascript - 错误 :Incomplete or corrupt PNG file in using jspdf

javascript - html 嵌入标签视频事件