似乎不少初学 CSS 的人对定位问题都很感冒，尤其是 margin、padding，简直能要人老命（秋香？！）。不过风凝在当初学的时候并没有遇到太大阻力。这还是要归功于当初小打小闹画过一段时间漫画，为了投稿不得不学习了“边界”（margin）和“补白”（padding）的概念。

所谓”补白“，就是为了防止在印刷剪裁的时候造成白边而填充的内容——也有人往里面画搞笑四格的。一般的漫画杂志会要求将画面内容画满补白，但是不能在补白中画上重要的部分——有点像《名侦探柯南》动画组在自行制作一集动画的时候不能涉及主线和人物性格（笑）。而”边框“，一般就是一片空白——这里是不允许画上东西的，但是也不可或缺，在页面与内容之间保持一定距离避免过份拥挤。至于那个”边线“（border），就是边框与补白之间的一条蓝铅笔线——通常蓝铅笔线是不会被印刷出来的，所以会推荐使用蓝铅笔画边线。

其实 HTML 诞生之处就是为了给学术论文排版，因此只要稍加留意就会发觉 HTML 和 CSS 中的很多东西就是印刷术语。在 CSS 里看似抽象的 margin、padding，在印刷上其实是一个很简单的概念。嗯…不知道做平面的设计师对于 HTML 和 CSS 会不会比常人更敏锐，或许更敏锐的是排版工人吧 :P

其实说来说去看来看去也不如自己动手写几行代码体会深刻——随便找一段文字或者一张图片，在它的选择器属性中设定宽度、背景图片/颜色、边框、padding、margin，来回复制粘贴几遍文字/图片的 HTML 代码，然后把东西拿到浏览器里面去看就一目了然了——元素和 padding 都是有背景的，而 margin 则是将文字/图片和其他的距离拉远。

效果怎么样？

如果你是个好孩子，应该会大叫一声：Oh no!

如果你真的测试了，你就会发现一些怪异的地方——纵向的 margin 重合了！这个现象当纵向相邻的元素 margin 值一样的时候尤为明显，似乎我们就只设定了顶部或者底部的 margin。纵向 margin 哪里去了？

Margin 和 padding 折磨人不仅仅是它们的定义不好掌握，也在于它们真的有点捉摸不定——有一个名词叫做“压缩边界”，就是说纵向相邻的边界压缩。这样有好处，那就是当我们需要编排一个纵向无序列表的时候，我们只需要写下

li { margin: 5px 0;}

就可以得到间距都是5像素的无序列表。压缩边界的坏处就如我上面提到的那个例子——当我们需要在 padding、边框以外再留出一段距离的时候该怎么办呢？

答：在相邻的元素的 margin 上动手脚吧。

上面这句话不是忽悠，是实打实的解决方案。只有这样才能保证出来的效果和你的预期以致——要知道，有时候捷径并非直线的那条路。不过还是有一个好消息的——压缩只应用于 margin，padding 和 border 不会被压缩。

目前流行的浏览器对于 margin、padding 的理解各有不同——现代浏览器们，比如 Firefox、Opera、Safari、IE7，都是按照web标准解释的，那就是元素框宽度=margin+border+padding+ width；而IE6及其更低版本，却将width理解为元素宽度+padding，既元素框宽度=margin+border+width——所以我经常怀疑IE6及其更低版本的开发者以前是给漫画社供稿的。因此在浏览器兼容性问题中，遇到最频繁的问题是 width/height 的问题。遇到这种bug，下划线 hack 和 !IMPORTANT hack 是最简便易行的解决方法。

Margin 和 padding 之所以重要，是因为它们承担了定位的任务——web标准不提倡 table 排版而是大力提倡使用CSS，margin 和 padding 就是使得排版变得轻松并且兼顾了浏览器兼容问题的解决方案。试想如果没有 margin 和 padding，恐怕我们还要和表格定位的网页作斗争吧？