合并边距不适用于Button

Question

我试图控制所有文本标签（如H1，H2，P等）和按钮之间的垂直间距，方法是全部分配：

h1,
h2,
h3,
h4,
p,
button { margin: 20px 0; }

正如预期的那样，这对于带有边距合并的文本标签来说效果很好，即H1后跟段落将在它们之间有20px的间距，而不是40px。但是按钮不是这种情况。如果我有：

<h1>Title</h1>
<p>Lorem ipsum</p>
<button>link</button>

段落和按钮之间的空间是40px，把按钮放在P标签中修复了这个但是语义上是否正确？

Answer 1

添加display: block以便边距会崩溃。但您也可以使用段落中的按钮。 p tag的内容模型为phrasing content，按钮正在填写内容。

h1,h2,h3,h4,p,button { margin: 20px 0; display: block; }

<h1>Title</h1>
<p>Lorem ipsum</p>
<button>link</button>