0

我在我的 CSS 中使用了不同的行高，这导致我的垂直间距出现问题。我希望水平线上方的数量与下方相同。

这是我的问题的一个例子：

我的 HTML

<div class="intro">
<p>The powered flight took a total of about eight and a half minutes. It seemed to me it had gone by in a lash. We had gone from sitting still on the launch pad at the Kennedy Space Center to traveling at 17,500 miles an hour in that eight and a half minutes. It is still mind-boggling to me. </p>
</div>
<hr />
<div class="normal">
<p>I recall making some statement on the air-to-ground radio for the benefit of my fellow astronauts, who had also been in the program a long time, that it was well worth the wait.</p>
</div>
<hr />
<div class="normal">
<p>The powered flight took a total of about eight and a half minutes. It seemed to me it had gone by in a lash. We had gone from sitting still on the launch pad at the Kennedy Space Center to traveling at 17,500 miles an hour in that eight and a half minutes. It is still mind-boggling to me.</p>
</div>

我的 CSS

.intro p { margin-bottom: 24px; font-size: 24px; line-height:36px; }
.normal p { margin-bottom: 18px; font-size: 16px; line-height:18px; }
hr { border-top: 1px solid rgb(200,200,200); margin: 10px 0}

你也可以在这里看到它：http: //codepen.io/dachan/pen/Csueb

我的问题有什么解决方案，减去必须手动为 hr 标签创建不同的边距？

此外，我确实打算拥有多个段落，因此任何省略边距底部的解决方案都不适合我。

4

4 回答 4

0

如果您知道您在文本流中的位置，只需在介绍和第一个文本单元之间使用不同的规则样式。以下将为您在第一个上方和下方提供相同的间距<hr/>

hr { border-top: 1px solid rgb(200,200,200); margin: 10px 0 28px 0 }
于 2013-01-23T19:37:02.340 回答
0

如果line-height将文本元素的 设置为等于 ，则font-size使元素的高度等于文本的高度。添加hr元素时，间距应该相同。

.intro p { font-size: 24px; line-height:24px; }

.normal p { font-size: 16px; line-height:16px; }

hr { border-top: 1px solid rgb(200,200,200); margin: 10px 0}
于 2013-01-23T19:40:55.017 回答
0

我不认为你的问题是你的行高。您为每个段落定义了下边距，但没有上边距。因此，您的第二段上方有默认边距，使其更接近 hr。

一种可能的解决方案是简单地添加边距顶部等于您的边距底部。

.intro p { margin-bottom: 24px; font-size: 24px; line-height:36px; }
.normal p { margin-top: 18px; margin-bottom: 18px; font-size: 16px; line-height:18px; }
hr { border-top: 1px solid rgb(200,200,200); margin: 10px 0; }

此处示例：http: //jsfiddle.net/3BEkL/1/

另一种可能性，可能不是您想要的，因为您似乎要根据每个段落的字体大小/行高在 hr 之间设置不同的间距，是从段落元素中删除所有边距样式并且仅适用hr 元素的边距。

.intro p { font-size: 24px; line-height:36px; }
.normal p { font-size: 16px; line-height:18px; }
hr { border-top: 1px solid rgb(200,200,200); margin: 30px 0; }

这里的例子：http: //jsfiddle.net/3BEkL/2/

于 2013-01-23T19:41:49.090 回答
0

我不使用该<hr>标签，因为它很难正确地使用样式，尤其是在称为 IE 的出色浏览器中。

相反，我使用一个空的应用div了一个类.hr。我的 CSS 看起来像这样：

.hr {
  border-top: 1px solid black;
  margin-top: 10px;
  height: 10px;
}
于 2013-01-23T19:38:51.673 回答