margin、border、padding属性

margin属性

margin属性用于设置页面中元素和元素之间的距离，即定义元素周围的空间范围，是页面排版中一个比较重要的概念。margin属性的语法格式如下：

margin:auto | length

其中，auto表示根据内容自动调整，length表示浮点数字和单位标识符组成的长度值或百分数，百分数是基于父对象的高度。对于内联元素来说，左右外延边距可以是负数值。

margin属性包含4个子属性，分别用于控制元素四边，包括margin-top、margin-left、margin-right、margin-bottom。

提示：

在为margin属性设置值时，如果提供4个参数值，将按顺时针顺序作用于上、右、下、左4个边；如果值提供一个参数值，将作用于4边；如果2个参数值作用于，第一个作用于上下，第二个作用于左右；3个参数值时作用于，第一个值作用于上，第二个作用于左右，第三个值作用于下。

border属性是内边距和外边距的分界线，可以分离不同的HTML元素，border的外边距是元素的最外围，在网页设计中，如果计算元素的款和高，则需要把border属性计算在内。border属性的语法格式如下：

            border：border-style | border-color | border-width；

border边框样式值表

提示

border属性不仅可以用于设置图像的边框，还可以为其他元素设置边框，如文字和Div等。

在CSS中，可以通过设置padding属性定位内容于边框之间的距离，即内边距。

padding属性的语法格式如下：

        padding：length

padding属性可以是具体的长度，也可以是相对于上级元素的百分比，但不可以使用负值。

padding属性包含4个子属性，分别用于控制元素四边，包括padding-top、padding-left、padding-right、padding-bottom。分别可以为盒子定义上、右、下、左和个边值。

在盒子模型中，中间部分content（内部）主要显示内容，这部分野是整个盒模型的主要部分，其他的如对margin、border、padding所做的操作都对content部分所做的修饰，对于内容部分的操作，也就是对文字，图像等页面元素的操作。