Question

我尝试使用各种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>

我需要做些什么改变或补充才能使这些线更接近（特别是第二条线垂直向上移动）？

Answer 1

它们之间有很大的空间，因为.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

Answer 2

垂直空间的灵活性有限是由<br>标签引起的。替代方法是删除<br>并将labels显示为块以获得堆叠外观。然后，如您所见，您的间距和填充（甚至线高）按预期工作。

.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;
  display:block;
}
.titletextjr {
  font-size: 1.4em;
  color: darkgreen;
  font-family: Candara, Calibri, Cambria, serif;
  margin-left: -32px;
  display:block;
}

<div class="container body-content">
  <div class="jumbotronjr">
    <label class="titletext" style="margin-top: 0.1cm;">eServices Reporting</label>
    <label class="titletextjr" style="margin-top: -2cm;">Purchasing Report for RB Kitchen</label>
  </div>
</div>

Answer 3

为什么不使用line-height而不是使用边距等？这是一个非常大的价值：

line-height: 2.1428571435;

根据你的需要把它放在那里。

Answer 4

你对标记有什么控制权吗？此处<label>标记的使用不正确。来自Mozilla Developer Network - “ HTML Label Element（）表示用户界面中项目的标题。它可以通过将控制元素放在元素中或使用for属性与控件相关联。 “ - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

对于正确的语义，我建议将这些更改为标题标记，因为它们似乎在页面上传达标题。

只需更改这些元素并删除<br>标记，我相信您会达到预期的效果：

    <h1 class="titletext" style="margin-top: 0.1cm;">eServices Reporting</h1>
    <h2 class="titletextjr" style="margin-top: -2cm;">Purchasing Report for RB Kitchen</h2>

如果您坚持使用<label>标签，则可以将线高调整为“1”。

如何垂直移动第二条线，减少它与它上面的线之间的空间？

4 个答案: