乐趣区

关于css:margin-外边距

第一步:根底阐明。

margin 的意思很容易明确,就是外边距,用更艰深的话说,就是二个盒子之间间距的设置。

margin 有许多须要留神的中央,比方块级元素垂直相邻外边距会合并,行内元素实际上不占高低外边距,左右外边距也不会合并,浮动元素的外边距也不会合并。

一般元素的 margin 百分百是依照父级元素(正确的说应该是蕴含块,具体能够看这篇文章对于 CSS 中设置 overflow 属性的值为 hidden 的相干了解)的宽来计算的,而相对定位的元素的 margin 百分比是依照第一个定位元素(relative,absolute 和 fixed)的宽来计算的。

第二步:block 元素重叠。

block 元素(不思考 float 和 absolute)在垂直方向产生 margin 重叠(不思考 writing-mode 扭转书写形式);margin 三种重叠:1. 相邻兄弟元素;2. 父亲元素和第一个或最初一个孩子元素;3. 空的 block 元素。

第三步:重叠条件。

父子元素重叠条件(margin-top)

  • 父元素非块状格局上下文元素;
  • 父元素和第一个子元素之间没有 inline 元素宰割;
  • 父元素没有 border-top 或 padding-top 设置。

父子元素重叠条件(margin-bottom)

  • 父元素非块状格局上下文元素;
  • 父元素没有 border-bottom 或 padding-bottom 设置;
  • 父元素和最初一个子元素之间没有 inline 元素宰割;
  • 父元素没有 height,min-height 和 max-height 的限度。

空的 block 元素重叠

  • 元素没有 border 或 padding 或 inline 设置;
  • 没有 height 或者 min-height 设置。

第四步:有价值的细节。

重叠计算方法:正正取最大、负负取最小和正负相加。

在书写方向的垂直方向,margin:auto 会主动调配残余空间(残余空间的意思简略的能够了解为:在没有设置宽之前的长度去掉你设置的宽余下的那段间隔)。

相对定位元素的非定位方向 margin 有效(貌似是的,不过形容不精确,其实始终无效,只不过当初只能够影响本人,无奈扭转兄弟了,因而看起来生效了)。

最初一个题外话,margin-collapse 能够设置重叠形式(collapse 默认,重叠、discard 勾销 margin, 等于 margin:0 和 separate 分隔,就是不产生重叠)。

退出移动版