网页编程中HTML,CSS中遇到的问题 - yulilong/my_blog GitHub Wiki

[TOC]

参考链接：https://www.cnblogs.com/xiexiaoping548364/p/5352957.html

// CSS 
.outerdiv {background: #50f047; }
.innerdiv {
  margin-top: 30px;
  background: #5f58ff;
  height: 80px;
}

// HTML
<div class="outerdiv">
  <div class="innerdiv"></div>
</div>

上面的代码执行后，子元素的margin-top会应用到父元素上，原因就是外边距合并了，

原因分析：

CSS文档中对margin的定义:
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

外边距合并:
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
外边距甚至可以与自身发生合并

当 没有内边距或边框把两个元素的外边距分隔开 时，外边距就会合并。拿我们刚才的例子来讲，outerdiv 和 innerdiv 正好就是这种情况，
所以 innerdiv 的外边距就与 outediv 的外边距合并了，要发生合并，必须要把两个元素的边框叠在一起，所以就出现了上面图中的情况。

• 解决方案：

知道了原因，解决起来就好办。我们只要把两个外边距隔开就可以了，把两个外边距分开的方法很多，简单列举几个

1、为父元素设置padding

2、为父元素或子元素设置border

3、在子元素前加入一个不是空的元素

4、为父元素或子元素声明浮动 flat:left

5、为父元素或子元素声明绝对定位

6、为父元素应用overflow：hidden属性（推荐）