Liu Zhongshu

在CSS中，一个最基本的概念是盒子模型（box model），每个页面上的元素都可以看成一个矩形的盒子，通过这些矩形的盒子，CSS可以精确的控制页面的布局（Layout）。

盒子的内容

每个box是由几个可选的的部分组成的，从外到内依次是 margin、border、padding、content，而在CSS中我们为元素所指定的宽度和高度（width和height）只是针对content的，也就是说，如果定义了一个元素的宽度和高度，但实际上元素在页面上占据的空间要大于定义的值，所以这也是margin和padding的字面所表达的意思，它们是为了留空的。当然margin、border、padding都是可选的，如果它们都不选，那么这个元素在页面上占据的空间就只有它的内容（content）了。

如果没有定义border，那么看起来似乎margin和padding的区别似乎就不大了，因为它们都是定义了元素content之外的留空，两个都完成同样的效果，但细节上还是有一些差别的，所以需要根据特定的场合（需求）来选择使用margin还是padding，下面就是这些区别。

Margin的合并

Margin有一个很有趣的特性，在垂直方向，两个盒子相连的margin会自动合并，也就是上面一个盒子的margin-bottom和下一个盒子的margin-top会合并，合并后的margin为两个原始margin中较大的一个，

之所以有这个的设计，可能是源自文字段落的天然特性， 两段文字的margin如果不合并，就会导致段落间距过大，不美观。这个合并特性给使用margin来做精确定位带来了一些不可预知性 ，我刚开始用margin时总是被弄糊涂，不过水平方向的margin是没有这个合并的，还有padding也是不会合并的（无论水平还是垂直），这是margin和padding的一个很大的区别。

背景色

对于一个元素，我们可以设置其背景色（一般是background-color）， 显然在其box中，content部分肯定是会应用这个背景色的，而实际上padding部分也会应用这个背景色（这可以理解为padding是在border里面的），而margin部分就不会应用这个background-color，实际上它是透明的，会把其父元素的background透上来（这个也可以理解，可以把margin定义的留空看成是元素外的，所以要透明）。这是margin和padding的又一个较大的区别。

浏览器的问题

这样看来box模型还是挺容易理解的，Firefox基本上严格遵循了这个模型，但现实是不完美的，IE的多个版本对标准的box模型未加“遵守”，采用了自己的box实现，不知道是理解上的问题，还是实现上的bug，IE有几处和上面的标准box模型不一致的地方 ，这给大量的Web设计人员带来了痛苦，需要专门针对每个不一致的地方提出“怪异”的解决方法，《CSS Mastery》一书竟然花了两章的篇幅专门描述各种hacks和bugs（大部分献给了IE）。

列表

大多数CSS喜欢在前面加上一句 * { padding:0; margin:0; }，这是为了取消缺省的所有元素的padding和margin，这样便于后面的精确的定位，也便于将来的浏览器兼容（因为不同的浏览器可能对于不同元素的缺省padding和margin不同），但是这样的0 padding和margin一个常见的副作用是将列表前的符号（那个点）也给取消了，所以通常还再在CSS里手动设置ul的padding-left来重现那个点。

相关文章

• 中文字体css
• CSS浏览器差异
• CSS的样式冲突