margin在中文中我们翻译成外边距或者外补白(本文中引用外边距)。他是元素盒模型(box model)的基础属性。
一、margin的基本特性
margin属性包括margin-top,margin-right,margin-bottom,margin-left,margin,可以用来设置box的margin area。属性margin可以用来同时设置box的四边外边距,而其他的margin属性只能设置其自各的外边距。
margin属性可以应用于几乎所有的元素,除了表格显示类型(不包括 table-caption, table and inline-table)的元素,而且垂直外边距对非置换内联元素(non-replaced inline element)不起作用。
二、margin的基本写法
外边距的margin-width的值类型有:auto | length | percentage
margin的默认值为0,并且margin支持负值。
上面我们曾提到属性margin可以用来同时指定box的四边外边距。如果属性margin有四个值,那么值将按照上-右-下-左的顺序作用于四边,即从元素的上边开始,按照顺时针的顺序围绕元素。表达式如下:
margin:top right bottom left;
box的实际大小=box的物理大小+正的margin
这仅对元素本身有效,对于其后面的相关元素,他们则只以margin的逻辑大小为准则,进行布局。
有朋友反应,听得很迷糊,越看越不懂,如果你对具体的理解过程不感兴趣的话,那记住下面我总结的结论就可以了,XD
结论:box最后的显示大小等于box的border及border内的大小加上正的margin值。而负的margin值不会影响box的实际大小,如果是负的top或left值会引起box的向上或向左位置移动,如果是bottom或right只会影响下面box的显示的参考线。