CSS标准盒子模型详解

所有的 HTML 元素都是以矩形为基础

Content :内容

width：content box的宽度
height：content box的高度

padding：内边距 

padding用来控制元素内容与border之间的空隙大小。

有三种方式可以设置：

padding: 10px;

CSS允许使用padding-top、padding-right、padding-bottom、padding-left属性来设置四个不同方向的padding值。

padding-top: 40px; 
padding-right: 20px; 
padding-bottom: 20px; 
padding-left: 40px;

 如果不想每次都要分别声明padding-top、padding-right、padding-bottom、padding-left属性，可以把它们汇总在一行里面一并声明(从padding-top开始按顺时针顺序）

padding: 10px 20px 10px 20px;

border：容器边框（border-width,border-style,border-color）

有两种方法添加边框

1. border: 2px solid red;

2. .red-border {
       border-color: red;
       border-width: 2px;
       border-style: solid;
     }

margin：外边距

和padding一样，margin也有三种设置方式

margin: 20px;

margin-top: 40px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 40px;

margin: 40px 20px 20px 40px;

 当margin：auto时，呈现的效果为水平居中