Css盒子模型介绍

1. 盒子的结构

一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。

margin 外边距

margin属性用于设置外边距，设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。只能是完全透明的，不能设置颜色背景。

margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边距

padding 内边距（填充）

padding表示盒子的内边距（填充）。与外边距不同，padding不是只能完全透明的，可以设置背景颜色和图片。
与margin类似，padding包含了上下左右四条边，开发者可以单独设置每一条边的边距。

padding-top：上部填充
padding-bottom：下部填充
padding-left：左部填充
padding-right：右部填充

border边框

border表示盒子的边界，它可以设置成可见的，样式多样的。
最基本的，border像margin和padding一样可以分别对每一条边进行设置，也可以使用简写属性border进行设置。

当border属性的色值不明确指定时，如border: 1px solid，边框颜色与当前元素的字体颜色color相同。