该属性用来设置元素四边上的外延边距。
其默认取值为auto(水平书写模式下,上边距和下边距计算值为0,左右边距的计算值取决于可用空间),也可取值为长度值或者百分比,正值负值均可,水平书写模式下百分比参照其包含块的width来计算。
如果提供4个参数值,则按上右下左(顺时针)的顺序作用于四边;如果提供3个参数,则第一个用于上边距,第二个用于左右边距,第三个用于下边距;如果提供2个参数,则第一个用于上下边距,第二个用于左右边距;如果提供1个参数,则作用于四边。
外边距始终是透明的。
如果要设置非替代行内元素的上下边距,必须先让该元素成为块级或者内联块级元素再使用margin进行设置才有用。
某些相邻(根据书写模式的不同可以是垂直方向或者水平方向)的margin会发生合并,该现象叫margin的折叠。
这四个属性可以对四个方向上的外边距进行单独的设置,其取值和注意点和margin属性类似,不再赘述。
margin属性是CSS基础中比较重要的一个属性,所以对其做以下扩展介绍。
当书写模式为水平书写模式时,margin取auto时,上下边距的计算值为0,左右边距为均分可用空间后的空间;而当书写模式为垂直书写模式时,margin取auto会让左右边距计算值为0,上下边距取可用空间均分后的空间。
上面示例的情况中前两种的书写模式(writing-mode)是水平书写模式,后四种的书写模式为垂直书写模式。第一、三、五种的文本流方向(direction)为从左到右,第二、四、六种的文本流方向为从右到左。
一个在不同方向上的margin取负值,表现是有些许差异的。
如上图所示,四个大的div(黑色边框的)的padding为20px,小div的宽高均为70px,四个绿色的div分别设置了四个方向上的-20px的margin。可以看到,设置左边或上边的margin负值,会使元素本身向该方向移动,而设置右边或者下边的margin负值时,会使在该方向上和该元素靠近的元素向该元素拉近。
针对margin负值这样的特性,可以在一些特殊的场景来使用它来满足我们的技术实现的需求。
我们希望在一横排li中每个li之间都有一根竖线用来做隔离,一般的情况下我们给每个li都加一个左边框,但是这样第一个li的左边框就会显得多余。这时,我们可以给第一个li的margin-left设置为-1px,让它往左移动1px从而被遮住。
有的时候为了制造tab的效果,还是会用ul包裹几个li(tab标签),此时li的下边框会和ul的下边框重合,为了解决这样的问题,我们统一给li标签的margin-bottom设置为-1px。
有的时候我们希望在同一行的某些分组的内容能够隔开一定的距离,可能就会给每个分组设置左右的padding,但是这样会导致最左边和最右边都会和容器有一个留白(这与我们的意志是相违背的,因为我们只想分组与分组之间有隔开的距离),这个时候我们可以给容器的左右margin均设置负值来抵消留白。绿色边框为我们的可视区域。
我们也可以用margin负值来做左右并排的布局。设想一下,两个div,如果把下面的div的margin-top设成上一个div的高度的负值,下面的那个div就会移动上去,这个时候再给下面这个div的margin-left设置上面那个div的宽度,这时他们就并排在了一起,并不需要设置float。
margin负值也可以用来实现元素水平垂直居中的效果,但前提是元素的宽高是已知的。将元素的position设成absolute,然后把top和left设成50%,最后将元素的margin-left和margin-top分别设成其宽高的一半的负值就可以实现这样的效果了。
当margin取百分比时,它是按照其包含块的宽度来做参照进行计算的,而不是水平方向上参照包含块宽度、垂直方向上参照包含块高度。这其中的原因是在排版中,水平方向上的长度是一定的,而垂直方向上的长度会随着内容的多少而进行扩展,如果是参照高度的话,margin就会随着高度的扩展而增大,这与排版的意图是相违背的。深一层次想,书写模式也会影响到margin取百分比时的参照,当书写模式为水平书写模式,margin百分比以包含块的宽度为参照,当书写模式为垂直书写模式时,margin百分比以包含块的高度为参照。
margin的折叠是指,在某些特殊情况下,垂直相邻的margin会发生合并,俗称折叠。如下面的例子所示。
可以通过控制台看到,两个div中间最终的距离为50px,而不是75px。
margin的折叠发生在非浮动块级元素之间,同时发生合并的margin必须是相邻的,中间不能有诸如border、内容(如全角空格)的阻隔。
有些特例是不发生折叠的。
另,需要特别注意的是,不要以为margin的折叠只会发生在元素与元素之间,当一个元素没有内容时,它的margin-top和margin-bottom也是有可能折叠的。
除此之外,同margin取百分比一样,margin的折叠也是受书写模式的影响的,当书写模式为水平书写模式时,垂直方向上的margin有可能发生折叠,当书写模式为垂直书写模式时,水平方向的margin可能发生折叠。