2016-12-21
在做页面布局（qiē tú）时，我们经常需要在块之间留一个间距。水平方向的情况通常靠浮动等各种强计算来解决，这里先不扯了。主要是来纠结一下垂直方向的块间距问题。我们通常会使用 margin 实现的，但就算只用 margin，具体的实现方式也是有很多选择的。
margin-top 和 margin-bottom 的选择
Bootstrap 喜欢使用 margin-bottom 来处理块元素之间的间距，这种做法会很纠结。我之前都使用 margin-top 的，因为 margin-top 可以使用 first-child 伪类把首先个元素的 margin-top 干掉，而且是 IE7 开始支持的。margin-bottom 可能就要依赖 last-child，这得从 IE9 才开始支持。而且考虑到插入元素通常使用 appendChild，也就是说 last-child 这个元素本身很不稳定，那么 margin-bottom 就可能带来各种麻烦。所以综合各种因素考虑，我选择了 margin-top。但我觉得，既然我都能想到这些问题，Bootstrap 的开发团队应该也能够想到，也许它们是故意这么设计的？是我还不够了解 Bootstrap 的思想么？
依赖于 margin 合并的解决方案
垂直方向的块间距除了使用单向的 margin 来解决以外还可以使用双向 margin 自动合并的方式来解决，这通常用于头尾也需要间距的情况。比如这个例子：
运行<!DOCTYPE html>
<style>
.list { border: 1px solid #ccc; width: 200px; padding: 0; }
.list-item { margin: 1em; border: 1px solid #ccc; }
</style>
<div class=”list”>
<div class=”list-item”>1</div>
<div class=”list-item”>2</div>
<div class=”list-item”>3</div>
<div class=”list-item”>4</div>
</div>
这也是一种很常用的布局方式。但这种方式总是会在头尾留下间距，如果想要处理掉，可能还要利用 margin 的容器合并特性，将这个 margin 合并到容器上，因为通常容器也需要一个间距嘛。比如下面例子就使用了这个特性：
运行<!DOCTYPE html>
<style>
body { font: 14px/1.5 Arial; }
.aside {
margin: 1em;
width: 200px;
padding: 0;
outline: 1px solid red;
}
.panel {
margin: 1em 0;
border: 1px solid #ccc;
border-radius: 4px;
overflow: hidden;
}
.panel-heading {
background: #f5f5f5;
border-bottom: 1px solid #ccc;
}
</style>
<div class=”aside”>
<div class=”panel”>
<div class=”panel-heading”>panel 1</div>
<div class=”panel-body”>data 1</div>
</div>
<div class=”panel”>
<div class=”panel-heading”>panel 2</div>
<div class=”panel-body”>data 2</div>
</div>
<div class=”panel”>
<div class=”panel-heading”>panel 3</div>
<div class=”panel-body”>data 3</div>
</div>
</div>
期望与现实
我非常希望使用 margin 合并的特性来处理垂直间距问题，但前提是所在的团队成员都必须了解 BFC，这对于大多数团队而言可能还真有点困难。如果团队无法承受各种技术细节的话，还是用原始的解决方案来得实在。
本文来源于大连网站建设公司、大连网站设计制作公司与大连网站推广公司-新图闻科技公司！
大连网站建设,大连网站设计,大连网站制作,大连网页设计，大连网站建设公司 ,大连网站设计公司, 大连网站制作公司，大连手机网站建设，手机网站建设，大连网站推广，网站推广，大连建网站，大连做网站，大连微信网站建设，大连微商城网站建设，大连商城网站建设，大连网络公司。
