腾讯云618限量抢购
  1. HTML教程

CSS 外边距 margin

最后更新:2010-10-11 23:26阅读:8946

外边距(margin)

外边距(margin)是围绕在边框外围的额外“空白”,透明且不可见。取值是由浮点数字和单位标识符组成的长度值或百分数。

设定外边距的例子:

dev{ margin: 5px 2px 5px 2px; }

该例子设定div元素的外边距从“上-右-下-左”依次为“5px 2px 5px 2px”,其设定顺序为从上开始顺时针执行。如果只设定一个值,则会应用于上下左右各边。

该属性也可以取值“auto”,即让系统分配默认值。

赋值简写

dev{ margin: 5px 2px 5px 2px; }

可以简写为:

dev{ margin: 5px 2px; }

在这个例子里,缺少了下边距和右边距的值,系统会自动采用上边距值作为下边距值,右边距值作为左边距。

其赋值简写的实际规则是:

  1. 如果缺少下外边距的值,则使用上外边距的值
  2. 如果缺少左外边距的值,则使用右外边距的值
  3. 如果只给定一个值,则各外边值均应用该值

复合属性

该属性为复合属性,可以单独指定每个方位的外边距。

外边距复合属性说明:
属性 说明
margin-top 单独指定元素上外边距,取值是由浮点数字和单位标识符组成的长度值或百分数
margin-right 单独指定元素右外边距,取值是由浮点数字和单位标识符组成的长度值或百分数
margin-bottom 单独指定元素下外边距,取值是由浮点数字和单位标识符组成的长度值或百分数
margin-left 单独指定元素左外边距,取值是由浮点数字和单位标识符组成的长度值或百分数

提示

给元素设定背景属性时,背景是无法铺设到外边距(margin)去的,但可以铺设到内边距(padding)。

内边距(padding)

内边距(padding)是指元素边框(border)和内容(content)之间的部分。取值是由浮点数字和单位标识符组成的长度值或百分数,但不可为负。

内边距也是复合属性,也可以分别设定4个边的内边距:padding-top、padding-right、padding-bottom和padding-left。内边距的用法和外边距类似,请参考外边距语法,在此不再赘述。


本章节内容共分 3 部分:
  1. 1. CSS 框模型尺寸计算
  2. 2. CSS 尺寸
  3. 3. CSS 外边距 margin
腾讯云618限量抢购