博客

• 
  属性介绍：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会进行合并（取大者）
      
      
    • 
      
      只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。