css-box盒子模型

盒子模型分为四部分：内容区，内边距，外边距，还包括内外边距间的边界。如图所示：

1 Content

每个元素的内容，如文本，图像。内容和盒子边缘没有空间。

2 padding

内容和边框之间的空间。内边距是透明的，没有颜色和装饰。如果元素使用背景，背景会延伸到内边距，到边界截止。

padding: 0px;

3 border

元素可以有一个可选边框，可以使用不同颜色，宽度和样式。

1. 宽度： border-width: *px;
2. 颜色：border-color: black;
3. 样式：border-style: solid/ double/ groove/ outset/ dotted/ dashed/ inset/ ridge.
4. 圆角：border-radius: *px;

宽度，颜色和样式可以单独设置，也可以三个合并在一起设置：

border: 2px solid red；

可是同时设置上下左右四个边框线，也可以单独指定。
圆角可以同时设置四个角，也可单独设置一个或两个角。

4 margin

外边距包围着边框，增加不同元素间的空间，外边距也是透明的，没有颜色或装饰。

margin: *px;