使用CSS来控制一个可见元素所占据的空间：盒模型

你的浏览器展现一个元素时，这个元素会占据一定的空间。这个空间由四部分组成。

中间是元素呈现内容的区域。这个区域的外面是内边距。再外面是边框。最外面的是外边距，外边距将该元素与其它元素分开。

外边距 边框 内边距 元素 浅灰色标出了布局的几个部分。

元素 你在浏览器看到的样子。

内边距，边框和外边距在元素的上、右、下、左都可以有不同的大小。所有这些大小值都可以为0。

颜色

内边距总是跟元素的背景色一样，所以当你设置背景色时，你会发现背景色在元素本身和内边距上都生效了。外边距总是透明的。

外边距 边框 内边距 元素 元素有绿色的背景。

元素 你在浏览器看到的样子。

边框

你可以用边线或者边框来装饰元素。

用 border 属性给元素四周指定统一的边框。在属性值中指定边框的宽度（通常是以显示到屏幕上的像素为单位）， 样式， 还有颜色。

样式包括：

solid	dotted	dashed	double
inset	outset	ridge	groove

你也可以通过设置样式为 none 或 hidden 来明确地移除边框，或者设置边框颜色为 transparent 来让边框不可见，后者不会改变布局。

如果一次只指定某一个方向的边框，就用属性： border-top， border-right， border-bottom， border-left。 你可以用这些属性指定某个方向上的边框，或者不同方向上的不同边框。

外边距和内边距

使用外边距和内边距调整元素的位置，并在其周围创建空间。

用 margin 属性或者 padding 属性分别设置外边距和内边距的宽度。

如果你指定一个宽度，它将会作用于元素四周（上、右、下、左）。

如果你指定两个宽度， 第一个宽度会作用于顶部和底部，第二个宽度作用于右边和左边。

你也可以按照顺序指定四个宽度： 上、右、下、左。