margin

2016-04-20  本文已影响31人  郭子林

margin

margin概念#####

margin属性给指定元素上下左右四个方向设置外边距(即指定元素距离其上下左右元素的距离)。
margin是margin-top,margin-right,margin-bottom和margin-left的缩写。

margin取值#####

margin初始值为margin:0;
<length>一个固定的数,可以为负数;
<percentage> 百分比,可以为负数(包含该块的元素的宽度);
auto 适当的值,可以用来使一个块元素水平居中。
当margin只有一个值时,作用于四个边;
当margin有两个值时,第一个值作用于上下,第二个值作用于左右;
当margin有三个值时,第一个值作用于上,第二个值作用于左右,第三个值作用于下;
当margin有四个值时,依次按照上右下左的顺序匹配(顺时针)。

负margin#####
  1. 使自己位移: margin-left/top:-10px;将自己向左/上移动10像素;
  2. 使周围元素位移:margin-right/bottom:-10px;
  3. 使元素宽度增加(前提该元素没有设定宽度)。
margin合并#####

1.当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
2.当一个元素包含在另一个元素中时(前提是外面的元素没有border且没有padding),它们的上和/或下外边距也会发生合并。
3.当一个空元素且没有边框但是有外边距top与bottom,在这种情况下,上外边距与下外边距也会发生合并。

注:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

block与inline元素中的margin#####

margin在块级元素下,上下左右任意设定。
margin应用在内联元素上,上下无作用,左右可设定。

上一篇 下一篇

猜你喜欢

热点阅读