margin，是CSS语法，这个简写属性用于在一个声明中设定所有当前或者指定元素所有外边距的宽度，或者设定各边上外边距的宽度。
基本介绍
- 中文名外边距
- 外文名margin
- 程式语言CSS
定义
margin 简写属性在一个声明中设定所有当前或者指定元素外边距属性。该属性可以有 1 到 4 个值。
margin 属性接受任何长度单位、百分数值甚至负值。
margin 属性可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。
简洁写法
margin跟padding一样，也有简洁写法。我们可以使用margin属性来设定四个方向的外边距。在实际编程中，我们往往使用的是margin的这种高效简洁写法来编程。
margin写法有3种，分别如下
margin:像素值; margin:像素值1 像素值2; margin:像素值1 像素值2 像素值3 像素值4;
例如
“margin:20px;”表示四个方向的外边距都是20px；
“margin:20px 40px;”表示margin-top和margin-bottom为20px，margin-right和margin-left为40px。
“margin:20px 40px 60px 80px;”表示margin-top为20px，margin-right为40px，margin-bottom为60px，margin-left为80px。大家按照顺时针方向记忆就可以了。
语法说明
这个简写属性设定一个元素所有外边距的宽度，或者设定各边上外边距的宽度。
块级元素的垂直相邻外边距会合併，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合併。同样地，浮动元素的外边距也不会合併。允许指定负的外边距值，不过使用时要小心。
边距属性
| 属性 | 描述 |
|---|---|
margin | 简写属性。在一个声明中设定所有外边距属性。 |
margin-bottom | 设定元素的下外边距。 |
margin-left | 设定元素的左外边距。 |
margin-right | 设定元素的右外边距。 |
margin-top | 设定元素的上外边距。 |
语法结构
margin:5px auto;意思上下为5,左右平均居中
margin-top: 20px; 上外边距
margin-right: 30px; 右外边距
margin-bottom: 30px;下外边距
margin-left: 20px; 左外边距
margin:1px 四边统一边距
margin:1px 1px 上下边距,左右边距
margin:1px 1px 1px 上,左右,下边距
margin:1px 1px 1px 1px 上,右,下,左边距
注释允许使用负值。
语法举例
例子 1margin:10px 5px 15px 20px;上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px
例子 2margin:10px 5px 15px;上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px
例子 3margin:10px 5px;上外边距和下外边距是 10px
右外边距和左外边距是 5px
例子 4margin:10px;所有 4 个外边距都是 10px
| 默认值 | 0 |
|---|---|
| 继承性 | no |
| 版本 | CSS1 |
| JavaScript 语法 | object.style.margin="10px 5px" |
实例
设定 p 元素的 4 个外边距
p { margin:2cm 4cm 3cm 4cm; }
浏览器支持
所有浏览器都支持 margin 属性。
注释任何的版本的 Internet Explorer（包括 IE8）都不支持属性值 "inherit"。
可能的值
| 值 | 描述 |
|---|---|
auto | 浏览器计算外边距。 |
length | 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。 |
% | 规定基于父元素的宽度的百分比的外边距。 |
inherit | 规定应该从父元素继承外边距。 |
内外距离区别
这是很多学html 人的困扰
其实说白了padding就是内容与框线的空隙.而margin 则是模组与模组的空隙.下面图解:
实例
本例演示如何将所有的边距属性设定于一个声明中。
<html><head><style type="text/css">p.margin{margin:50px100px75px100px}</style></head><body><p>这个段落没有指定外边距。</p><p class="margin">这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。</p><p>这个段落没有指定外边距。</p></body></html>