css - 加border\padding消除外边距融合的原因

问题描述

问 题

* {
  margin:0;
  padding:0;
  border:0;
}

#outer {
  width:300px;
  height:300px;
  background-color:red;
  margin-top:20px;
}

#inner {
  width:50px;
  height:50px;
  background-color:blue;
  margin-top:10px;
}
  
<div id="outer">
  <div id="inner">
  </div>
</div>

上面的代码会产生上外边距融合，子容器的外边距消失。

通过给父容器加borderpadding消除外边距融合。
请问，为何可以消除外边距融合？
别谈现象，请谈理由？？

解决方案

css规范中规定，相邻的margin会坍塌(collapse)
https://www.w3.org/TR/2011/RE...

你的例子中，父元素在没有padding和border的情况下，子元素和父元素的margin-top部分是相邻的

结果就会变成这样

但如果父元素有任何border-top或者padding-top的情况下，父元素最外围是margin，然后是border，然后是padding，最后再是放子元素的content部分，子元素的margin-top相邻的是父元素的padding-top，或者是父元素的border-top，所以父子元素的margin-top部分不再相邻。

这篇关于css - 加border\padding消除外边距融合的原因的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！