div 内边距不是容器 div 背景的一部分，除非我添加边框 [重复]答案

【问题标题】：inside div margins not part of container div background unless i add a border [duplicate]div 内边距不是容器 div 背景的一部分，除非我添加边框 [重复]
【发布时间】：2013-02-14 04:07:37
【问题描述】：

这不是生产问题，这只是我遇到并一直想知道的问题。内部 div 的边距不会获得父 div 的背景颜色，除非我为父 div 添加边框。所以innerDiv的margin不会得到header div的背景，除非我给header div添加边框。

<div id="container">
   <div id="header">
     <div id="innerDiv">Title</div> 
   </div>
   <div id="content" >

     <button>Remove Border</button>
   </div>

   <div id="footer" >
     footer
   </div>

</div>

这个小提琴希望能证明我的问题。 http://jsfiddle.net/eTq2P/6/

所以我不是在寻找解决方法，我想知道为什么除非向父 div 添加边框，否则边距不会获得父 div 的背景颜色。我期望边距包含在父 div 中。

【问题讨论】：

这种现象称为margin collapse。

标签： css html margin

【解决方案1】：

添加边框强制#header 包含#innerDiv，因此将其拉伸到#innerDiv 的大小。您可以通过添加无边界来完成同样的事情

#header {overflow: auto;}

另请参阅：CSS: Adding a border changes the background-color (?!)

【讨论】：

【解决方案2】：

*{box-sizing:border-box;} 有很大帮助。

【讨论】：

抱歉，我误读了您的问题。