Question

我有一些正文大致如下：

<p>Article nor prepare chicken you him now. Shy merits say advice ten before lovers innate add.</p>
<h2>Do commanded an shameless we disposing do</h2>
<p>Do commanded an shameless we disposing do. Indulgence ten remarkably nor are impression out. Power is lived means oh every in we quiet.</p>
<h2>Alteration unaffected impossible ye</h2>
<p>For saw half than cold. Pretty merits waited six talked pulled you. </p>

我想在h2和p元素之间留出一些合适的间距，以便读者知道他们正在阅读文档的新部分。 p的大小为160％（16px），h2大小为220％（22px）。

它们之间的理想距离大约为15px。但这是固定值，所以我这样做了：

p + h2 {margin-top: 1em} /* instead of margin-top:15px */

它看起来很好，但我不确定它是否正确的文本布局规则。因为现在由于h2标签的大小，margin-top值等于22px。

我做得对吗，还是有正确的做法？我担心的是，如果h2字体大小增加但p元素没有增加，那么它们之间的边距将是巨大的并且看起来很愚蠢。

Answer 1

听起来好像你只需要为你的元素添加一些填充，如果你想让它特定于某些元素，就使用类。

这里有一些JS小提琴分配给P元素的类

<p class="textspan">Article nor prepare chicken you him now. Shy merits say advice ten before lovers innate add.</p>

.textspan{
padding-bottom: 100px;
}

https://jsfiddle.net/vhbsdbjp/

Answer 2

试试这个。它会从顶部和底部将所有内容从

块推出15px。

p {margin-top: 15px, margin-bottom: 15px;}

enter link description here

如何在<p>和</p> <h2>标记之间提供正确的边距空间

2 个答案: