块级元素的margin合并\共存实验

• 属性介绍：margin能接收数字长度和值两种数据；

• 数字长度：数字长度的单位可以是像素、英寸、毫米或em；
• 值：值可以是auto、%、inherit；
  • auto：一般用来居中，如左右外边距设置为auto实现左右居中。
  • %：基于父元素的长度或宽度按照百分比计算；如margin：10%；
  • inherit：继承父元素的外边距属性；

• 外边距合并问题的两种情况：
  • 父元素和第一个子元素或最后一个子元素的合并：
    • 如果父元素的margin-top与第一个子块元素之间没有border、padding、inline-content或clearrance间隔，那么子块元素的margin-top会和父元素的margin-top合并（取大者）
    • 如果父元素的margin-bottom与最后一个子块元素之间没有border、padding、inline-content或clearrance间隔，那么子块元素的margin-bottom会和父元素的margin-bottom合并（取大者）
      
  • 毗邻的元素（垂直毗邻）
    • 如<li>便签垂直排布时，相邻的两个标签的margin-top和margin-bottom会进行合并（取大者）
    • 只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。