盒子模式 - 爱码网

　　CSS 中有个重要的概念，就是盒子模式 (Box model)网上找了一个盒子模式图形，如下

盒子模式

盒子里由外至里说明如下：
margin 页边空白　也有人称之为：边距、边界、外边距等等
border 边框
padding 填充也有人称之为：间隙、内边距、补白等等
content 内容

CSS 页边空白属性 (margin) 是用来设置一个元素所占空间的边缘到相邻元素之间的距离；
CSS 边框属性 (border) 用来设定一个元素的边线；
CSS 间隙属性 (padding) 是用来设置元素内容到元素边框的距离；

CSS 背景属性指的是 content 和 padding 区域；
CSS 属性中的 width 和 height 指的是 content 区域的宽和高；

CSS设置这些属性的顺序为　top(上)、right(右)、bottom(下)、left(左)

例子代码如下：


完整CSS:
body
{
    margin-top:100px;
    margin-right:40px;
    margin-bottom:10px;
    margin-left:70px;
}
简写CSS:
body 
{
    margin: 100px 40px 10px 70px;
}