如何在<p>和<h2>标签之间设置正确的页边距

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标记的大小，页边距顶部的值等于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

Try this.It会把所有东西都推开

从顶部到底部按15px的大小分块。

​

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

enter link description here