浏览器的盒子

聊到盒子模型，终于可以给IE点个赞了。IE的怪异盒子模型给网页布局节省了很大的力气，个人觉得是一个很好的东西。
那么现在我们来详细了解一下：

盒子

盒子模型就是标签的结构。
一个盒子包含五个部分：margin（外边距）、border（边框）、padding（内边距）、width（实际宽度）、height（实际高度）。那么我们接下来详细了解一下。
先上一张盒子的图：

很清晰对吧。

margin：外边距

外边距是该盒子与其他盒子之间自己设定的间距，它除了一个距离之外，什么都不能设。
外边距有四个值，当然也可以混合写。同时，它不计算在内容宽度中。

分开写：
上边距 = x
margin-top:x;
右边距 = x
margin-right:x;
下边距 = x
margin-bottom:x;
左边距 = x
margin-left:x;
混合写：
margin:x   x   x   x;
	   上  右   下  左
上边距   右边距   下边距   左边距
margin:x;
上边距 = 右边距 = 下边距 = 左边距 = x
margin:x   y;
上边距 = 下边距 = x
左边距 = 右边距 = y
（对边相等）
margin:x1   x2   x3;
上边距 = x1
右边距 = 左边距 = x2
下边距 = x3
当然还可以这样写（不推荐）：
margin:x；
margin-top:0px/none;
这样就将上边距去掉了，其他三个还在

先看一个小栗子：

这是一个上边距的例子，当然，另外三个边距也是同理

我用了一个border（边框）来圈出了盒子的内容区域，很明显，margin不在内容区域中。

margin值可以用像素也可以用百分比。

我将div变成行内块元素，来看看效果&