我尝试使用各种 CSS 属性(例如 margin-top
和 padding
)来减少两行文本之间的垂直间距,但似乎没有任何效果。
这两行看起来是这样的:
我希望它们靠得更近一些,这样它们就几乎要接触了。但是,无论我如何处理 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;
}
关于html - 我怎样才能垂直移动第二条线,减少它和它上面的线之间的空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38446172/