web前端开发中CSS margin(外边距)的教程

这篇文章给大家讲述了web前端开发中CSS margin(外边距)的教程。

CSS margin(外边距)

CSS margin(外边距)属性定义元素周围的空间。

margin

margin 清除周围的(外边框)元素区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

Margin - 简写属性

为了缩短代码，有可能使用一个属性中margin指定的所有边距属性。这就是所谓的简写属性。
所有边距属性的简写属性是 margin :

margin简写属性。在一个声明中设置所有外边距属性。
margin-bottom设置元素的下外边距。
margin-left设置元素的左外边距。
margin-right设置元素的右外边距。
margin-top设置元素的上外边距。

该属性可以有 1 到 4 个值。
以margin为例，padding同理
margin为4个时，margin:上 右 下 左;（为顺时针方向）
margin为3个时，margin:上 左=右 下;
margin为2个时，margin:上=下 左=右;
margin为1个时，margin:上=右=下=左;
一起来举个例子,一张大桌子,桌子上有好几个盘子,里面有好几盘菜,矩形的桌子和矩形的盘子你们应该见过吧.
margin
设置两个div块(盘子)的距离；在桌子上,这盘菜和那盘菜怎么放,放多远你都可以自己设置.这玩意还分上下左右,比如说上,你可以margin-top : 10px,也可以写成margin : 10px , 0 , 0 , 0margin后面的参数是按上下左右这样的方位去设置的.
padding
padding是调整子元素(盘子)的位置.盘子距离桌子边近,还是远,你可以自己设置,但是不能超出去,不然会掉下去.设置方法和margin类似.
border
这个比较有意思,如果说,菜多了,桌子上放不下了,咋办,那就把桌子下的延伸版抽出来接上去,也就是说,盘子还是盘子,菜还是菜,都没变,是桌子有大了一圈.