css边距设置

CSS边框属性  边框风格属性 (border-style)

这个属性用来设定上下左右边框的风格，它的值如下：

·         none (没有边框，无论边框宽度设为多大)

·         dotted (点线式边框)

·         dashed (破折线式边框)

·         solid (直线式边框)

·         double (双线式边框)

·         groove (槽线式边框)

·         ridge(脊线式边框)

·         inset (内嵌效果的边框)

·         outset (突起效果的边框)

演示示例：分别使用none,dotted, dashed, solid, double, groove, ridge, inset, outset的CSS边框风格属性示例

边框宽度属性 (border-width)

这个属性用来设定上下左右边框的宽度，它的值如下：

·         medium (是缺省值)

·         thin (比medium细)

·         thick (比medium粗)

·         用长度单位定值。可以用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位 (em, ex, px)。

演示示例：分别用medium, thin, thick和长度单位定制的CSS边框宽度属性示例

边框颜色属性 (border-color)

这个属性用来设定上下左右边框的颜色。例句如下：

.d5 {border-color:gray;border-style:solid;}

演示示例

边框属性 (border)

这个属性是边框属性的一个快捷的综合写法，它包含border-width, border-style和border-color。例句如下：

.d1 {border:5px solid gray;}

演示示例 

单边边框属性

上下左右四个边框不但可以统一设定，也可以分开设定。

设定上边框属性，你可以使用border-top, border-top-width, border-top-style, border-top-color。

设定下边框属性，你可以使用border-bottom, border-bottom-width, border-bottom-style, border-bottom-color。

设定左边框属性，你可以使用border-left, border-left-width, border-left-style, border-left-color。

设定上边框属性，你可以使用border-right, border-right-width, border-right-style, border-right-color。

演示示例：设置单边边框属性的示例

CSS边距属性

边距属性是用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离。

左边距属性 (margin-left)

这个属性用来设定左边距的宽度。示例如下：

.d1{margin-left:1cm}

演示示例

右边距属性 (margin-right)

这个属性用来设定右边距的宽度。示例如下：

.d1 {margin-right:1cm}

演示示例请参照左边距属性示例，只要将里面的margin-left改成margin-right即可。

上边距属性 (margin-top)

这个属性用来设定上边距的宽度。示例如下：

.d1 {margin-top:1cm}

演示示例请参照左边距属性示例，只要将里面的margin-left改成margin-top即可。

下边距属性 (margin-bottom)

这个属性用来设定下边距的宽度。示例如下：

.d1{margin-bottom:1cm}

演示示例请参照左边距属性示例，只要将里面的margin-left改成margin-bottom即可。

边距属性 (margin)

这个属性是设定边距宽度的一个快捷的综合写法，用这个属性可以同时设定上下左右边距属性。

你可以为上下左右边距设置相同的宽度。示例入下：

.d1 {margin:1cm}

你也可以分别设置边距，顺序是上，右，下，左。示例如下：

.d1 {margin:1cm 2cm 3cm 4cm}

上面的代码表示，上边距为1cm，右边距为2cm，下边距为3cm，左边距为4cm。

演示示例：上下左右边距宽度相同

演示示例：上下左右边距宽度各不相同

 

CSS间隙属性

间隙属性(padding)是用来设置元素内容到元素边界的距离。

左间隙属性 (padding-left)

这个属性用来设定左间隙的宽度。示例如下：

.d1{padding-left:1cm}

演示示例

右间隙属性 (padding-right)

这个属性用来设定右间隙的宽度。示例如下：

.d1 {padding-right:1cm}

演示示例请参照左间隙属性示例，只要将里面的padding-left改成padding-right即可。

上间隙属性 (padding-top)

这个属性用来设定上间隙的宽度。示例如下：

.d1 {padding-top:1cm}

演示示例请参照左间隙属性示例，只要将里面的padding-left改成padding-top即可。

下间隙属性 (margin-bottom)

这个属性用来设定下间隙的宽度。示例如下：

.d1{padding-bottom:1cm}

演示示例请参照左间隙属性示例，只要将里面的padding-left改成padding-bottom即可。

间隙属性 (padding)

这个属性是设定间隙宽度的一个快捷的综合写法，用这个属性可以同时设定上下左右间隙属性。

你可以为上下左右间隙设置相同的宽度。示例入下：

.d1 {padding:1cm}

你也可以分别设置间隙，顺序是上，右，下，左。示例如下：

.d1 {padding:1cm 2cm 3cm 4cm}

上面的代码表示，上间隙为1cm，右间隙为2cm，下间隙为3cm，左间隙为4cm。

演示示例：上下左右间隙宽度相同

演示示例：上下左右间隙宽度各不相同

 

CSS盒子模式(Box Model)

CSS 中有个重要的概念，就是盒子模式 (Box model)。

胡戈的"一个馒头引发的血案"中有个圆圈套圆圈娱乐城，而这个盒子模式套用这句话来说，就是方块套方块。

先看看下面这个图，黑框包围的一个方块，就是一个盒子 (Box)。

盒子里由外至里依次是：

·         margin 边距

·         border 边框

·         padding 间隙 (也有人称做补丁)

·         content (内容，比如文本，图片等)

CSS 边距属性 (margin) 是用来设置一个元素所占空间的边缘到相邻元素之间的距离。

CSS 边框属性 (border) 用来设定一个元素的边线。

CSS 间隙属性 (padding) 是用来设置元素内容到元素边框的距离。

 

CSS 背景属性指的是 content 和 padding 区域。

CSS 属性中的 width 和 height 指的是 content 区域的宽和高。