Margin 边距重叠问题

DIV+CSS 实战 之 margin边距重叠问题 (2)

2.)margin边距冲突 边距折叠问题

在div+css 实战中 使用margin 属性时 当一个元素处在另一个元素里面时,事情就变得更不可思议了。这种情况可能导致一些令人头疼的问题出现。

 例如:

 <!--HTML code-->

<div>div+css 实战</div>

<!-- css code-->

<style type="text/css">

  div {margin-top:20px; margin-bottom:20px; }

</style>

在 div 元素的上面下面边各增加20px 的空间看起来还不错，没什么问题。

 

但当你要在 <div> 元素里面增加一个<h3> 标题元素时，并且要在它与 div 的顶部和底部之间各留出一点空间，于是设置标题的 margin-top:10px; margin-bottom:10px;

 例如:

 <!--HTML code-->

<div><h3>div+css 实战<h3></div>

<!-- css code-->

<style type="text/css">

  div {margin-top:20px; margin-bottom:20px; }

  h3{margin-top:10px; margin-bottom:10px; }

 

 

  div{background-color:#f00;} 

  h3 {background-color:#ff0;} 

</style>

按照正常的理解 div 里面的元素 h3 设置了margin 属性应该把 div 会给称大了 因为 h3就在div里面啊，它设置了margin-top 和 margin-bottom 属性。

但实际情况却并没有改变 div 的大小 当我们在浏览器上查看时发现只能看到一种背景色就是h3 的 蓝色，如果div 被h3 的margin 属性称大了，那就可以看到 div 的背景色 红色啊。

像这样好像在 h3里面设置的margin属性没有用一样没有达到我们想要的效果。

 

上面这种情况就要我们要了解的 margin 边距折叠问题。

怎么看这类问题呢，我们这样去理解。

在一个元素里面的子标签这样的情况，父标签div 没有设置任何的 border 和 padding  那么它里面的 元素如果设置了 margin 属性就会导致 margin 距离和父标签的margin 折叠了（就是好像到它们的margin 在一起重叠了 注意即使父元素没有设置 margin 也是一样的。）[注意这类问题也只出在margin-top 和margin-bottom的垂直方向]

 

要处理好这样的问题我们只要给 父元素增加border 或者增加一些padding 这样就会把 子元素和父元素的margin 属性隔开就不会出现折叠的问题了。

像上面的问题这样处理就可了

<!--HTML code-->

<div><h3>div+css 实战<h3></div>

<!-- css code-->

<style type="text/css">

  div {margin-top:20px; margin-bottom:20px;  border:1px solid #fff;}

  h3{margin-top:10px; margin-bottom:10px; }

 或者这样写css

  div {

    margin:20px 0;    

    padding:10px 0;   

  }

  h3 {}

 

  div{background-color:#f00;} 

  h3 {background-color:#ff0;} 

</style>

 

上面的这个问题就是很多初学者，搞不明白为什么总用margin 不行只好改用paddin 就行了也不是很清楚为什么，什么时候会出现这样的问题，在开发时总是有一些jiu 结。