Css 合并页边距不适用于按钮

我试图通过分配所有文本标记（如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标记中可以解决这个问题，但是语义正确吗

添加

display:block

，这样边距将折叠。但你也可以在段落中使用按钮。一个按钮的内容模型是语法内容

h1、h2、h3、h4、p、按钮{边距：20px 0；显示：块；}

标题
同侧眼睑

链接

Add

display:block

，这样边距将折叠。但你也可以在段落中使用按钮。一个按钮的内容模型是语法内容

h1、h2、h3、h4、p、按钮{边距：20px 0；显示：块；}

标题
同侧眼睑

link

我刚刚尝试过这个，但似乎没有任何效果。您使用的是

float:left/right

还是flexbox？在这种情况下，边距不会折叠。啊，我是个白痴，这个按钮在我的代码中被内联了一点。现在的问题是，由于按钮是一个块，它不会与文本居中。我刚刚尝试过这个方法，但似乎没有任何效果。您使用的是

float:left/right

还是flexbox？在这种情况下，边距不会折叠。啊，我是个白痴，这个按钮在我的代码中被内联了一点。现在的问题是，因为按钮是一个块，它不会与文本居中。是的，你可以在段落中使用按钮。一个段落的内容模型是“短语内容”，一个按钮是短语内容。啊，如果是这样的话，那就更好了，因为在标题中使用的按钮不会起作用。谢谢你的帮助。是的，你可以在段落中使用按钮。一个段落的内容模型是“短语内容”，一个按钮是短语内容。啊，如果是这样的话，那就更好了，因为在标题中使用的按钮不会起作用。谢谢你的帮助。