CSS margin 属性使用方法及示例

margin CSS属性在元素的所有四个侧面上设置外边距。 它是margin-top，margin-right，margin-bottom和margin-left属性的简写属性。

下表为此属性的用法说明和版本历史记录，以及该属性在javascript脚本中的使用语法。

句法

该属性的语法如下：

margin: [ length | percentage | auto ] 1 to 4 values | initial | inherit

下面的示例演示了如何使用margin属性。

  h1 {
   margin: 25px;
  }
  p {
   margin: 50px 100px;
  }

该速记符号可以采用一个，两个，三个或四个空格分隔的值。

• 如果设置一个值，则该边距适用于所有四个面。

• 如果设置了两个值，则第一个值将应用于顶部和底部，第二个值将应用于右侧和左侧。

• 三个值分别应用于顶部，水平（即左右）和底部。

• 四个值依次应用于顶部，右侧，底部，左侧。

属性值

下表描述了此属性的值。

浏览器兼容性

margin属性浏览器的兼容性，下表中的数字表示支持该属性的浏览器最低版本号；所有主流浏览器均支持该属性。

Firefox 1+ Google Chrome1+ Internet Explorer 3+ Apple Safari 1+ Opera 4+

进一步阅读

请参考以下教程：CSS Margin，CSS Box Model。

相关属性：margin-top，margin-right，margin-bottom，margin-left。