提问人：Merc 提问时间：4/4/2013 最后编辑：dfsqMerc 更新时间：4/4/2013 访问量：175
设置包含 div 的边框会显著改变其大小
Setting border of containing div changes its size dramatically
问：
以这个 HTML. 如果你从黄色框中取出“border： 1px solid”，它的大小会发生很大变化（它会大大缩小）。
...为什么？
更新：如果我更改为内联块，大小保持不变。所以，这个标签似乎是问题所在......但是，为什么外部 div 中的边框会使内联标签的大小发生如此巨大的变化呢？pp
<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>
答：
5赞
PSL
4/4/2013
#1
给你：-
相邻的兄弟姐妹
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>
父项和第一个/最后一个子项
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.
空块
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.
看看这个小提琴 - 它现在只添加几个跨度后不会崩溃。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>
评论
0赞
Merc
4/4/2013
噢，我的天......我遇到了这样的边缘情况，这甚至都不好笑。但。。。为什么？我的意思是，说真的，为什么？这不是一个很常见的情况，但仍然......
0赞
Bharat Soni
4/4/2013
#2
我认为这是由于您没有在其中进行任何重置的原因......试试这个... 在您的 CSS 中添加
*{margin:0px;padding:0px;}
现在尽可能多地提供边距和填充......它将作为魅力......试一试
我已经编辑了你的小提琴 http://jsfiddle.net/BbKED/1/
评论
<p>