以这个 HTML 为例。 如果你从黄色框中取出“border: 1px solid”，它的大小会发生很大变化(它会大大缩小)。
...为什么？
更新:如果我将 p 更改为内联 block ，大小将保持不变。所以，p 标签似乎是问题所在……但为什么外部 div 中的边框会使内联标签的大小发生如此显着的变化？
<body style="height:100%">
<div style="background-color: red; border-style:solid;">
<div style="background-color: yellow; border:1px solid;">
<p>Inside</p>
</div>
<p>Something</p>
</div>
<div style="background-color: blue; border-style:solid;">
<p>Something else </p>
</div>
</body>
最佳答案
给你:-
相邻的 sibling
The margins of adjacent siblings are collapsed (except when the later sibling needs to be cleared past floats). For example:
<p>The bottom margin of this paragraph is collapsed...</p>
<p>...with the top margin of this paragraph.<p>
parent 和第一个/最后一个 child
If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
空 block
If there is no border, padding, inline content, height, or min-height to separate a block's margin-top from its margin-bottom, then its top and bottom margins collapse.
看看这个 fiddle - 它现在在添加几个 span 后不会崩溃。 http://jsfiddle.net/aPaBy/
<div style="background-color: red; border-style:solid;">
<div id="test" class="border" style="background-color: yellow;">
<span>hi</span>
<p>Inside <button>Test</button></p>
<span>hi</span>
</div>
<p>Something</p>
</div>
关于html - 设置包含 div 的边框会显着改变其大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15802193/