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;
}