考虑以下 MWE
<!doctype html>
<html>
<style>
div.compact-inverse {
border: 1px solid black;
}
div.compact-inverse > input {
display: inline-block;
width: 16px;
height: 16px;
margin: 12px 0;
}
div.compact-inverse > label {
display: inline;
margin: 12px 0;
padding-left: 18px;
border: 1px solid red;
background-color: pink;
}
div.compact-inverse > p {
display: block;
margin: 12px 0;
padding-left: 34px;
border: 1px solid blue;
background-color: cyan;
}
</style>
<body>
<form>
<div class='compact-inverse'>
<input type='checkbox' name='delete_imported' /><label>Delete originals</label>
<p>Original files will be deleted after the import when possible.</p>
</div>
</form>
</body>
</html>正如您从屏幕截图中看到的，第一行(input with label)和第二行(p)之间的垂直边距) 不是折叠的而是堆叠的。
为什么？
最佳答案
Adjoining vertical margins collapse
和
Two margins are adjoining if and only if … both belong to in-flow block-level boxes that participate in the same block formatting context
label 和 input 是内联元素。它们不会生成 block 级盒子。
关于html - 为什么垂直边距不会折叠？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71549205/