margin属性VIP免费

由浅入深漫谈margin属性 2007-3-18 上午 - HTML/CSS/XML/XSL - CSS - margin 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）不起作用。 或许有朋友对非置换元素（non-replaced element）有点疑惑，稍微帮助大家理解一下。非置换元素，W3C 中没有给出明确的定义，但我们从字面可以理解到，非置换元素对应着置换元素（replaced element），也就是说我们搞懂了置换元素的含义，就懂了非置换元素。置换元素，W3C中给出了定义： “An element that is outside the scope of the CSS formatter, such as an image, embedded document, or applet” 从定义中我们可以理解到，置换元素（replaced element）主要是指 img, input, textarea, select, object 等这类默认就有 CSS 格式化外表范围的元素。进而可知，非置换元素（non-replaced element）就是除了 img, input, textarea, select, object 等置换元素以外的元素。 margin 始终是透明的。 二、margin 的基本写法 外边距的 margin-width 的值类型有：auto | length | percentage percentage：百分比是由被应用 box 的containing block（注：一个元素的 containing block 是该元素产生的 box(es)在计算位置和大小时参考的一个矩形）的大小所决定。对于 margin-top 和 margin-bottom 也同样成立。 margin 的默认值为 0，并且 margin 支持负值。 上面我们曾提到属性 margin 可以用来同时指定 box 的四边外边距。如果属性 margin 有四个值，那么值将按照上-右-下-左的顺序作用于四边，即从元素的上边开始，按照顺时针的顺序围绕元素。表达式如下： margin：top right bottom left； 四个数值中间以空格分隔。效果等同于： margin-top:value; margin-right:value; margin-bottom:value; mar...