CSS的外边距margin

CSS的外边距margin

margin是盒模型比较特殊的属性，设置外边距margin会在元素外创建额外的空白，这里的空白不能放其他的元素，且该区域中可以看到父元素的背景。

外边距可以应用到行内元素，上下外边距对行高没有任何影响。但由于上下外边距实际上是透明的，所有无任何的视觉效果，左外边距应用到元素开始处，右外边距应用到元素结束处。

margin值应用于所有元素，无继承性，设置百分数是相对于包含块的width。对于普通元素来说，包含块是块级父级元素；对于定位元素来说，包含块是定位父级。所以，普通元素的margin百分比相对于块级父级元素的width，定位元素的margin百分比相对于定位父级的width

margin-start相当于流方向的开始端的外边距。在正常的流向下，margin-start等同于margin-left，两者重叠不累加；若水平流是从右向左，margin-start等同于margin-right；在垂直流下，等同于margin-top

类似的，margin-before在默认流向的情况下，等同于margin-top。

只有margin不显示当前元素背景，只有margin可以设置负值，margin和宽高可以设置auto

• margin的重叠

  也叫margin合并，有两个前提：

  • 只发生在block元素上，不包括float、absolute、inline-block元素
  • 只发生在垂直方向上，不考虑writing-mode

  margin重叠包含一下三种情况

  • 相邻的兄弟元素
  • 父级元素和第一个或最后一个子元素，父子级的margin重叠又叫margin传递
    • 父子级margin重叠需要满足的条件：
      • 父元素不是BFC元素
      • 父元素没有padding-top、border-top值
      • 父元素和第一个子元素之间没有inline元素间隔
  • 空的block元素
    • 元素没有border、padding值
    • 里面没有inline元素
    • 没有height或min-height

  **规则：**两个正垂直外边距，浏览器取最大值；如果垂直外边距都设置为负值，浏览器会选取两个外边距的绝对值的最大值；如果一个正外边距与一个负外边距合并，会从正外边距减去这个负外边距的绝对值。即：正正取大，正负相加，负负取最大

• margin表现

  • block元素可以使用四个方向的margin值
  • inline元素 上下方向的margin值无效
  • inline-block元素使用上下方向的margin负值看上去无效，只是看上去无效，与其默认的vertical-align:baseline有关，当垂直对齐的属性值为其他值时，则会显示不同的视觉效果。