Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

布局中的垂直块间距问题

  在做页面布局(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,这对于大多数团队而言可能还真有点困难。如果团队无法承受各种技术细节的话,还是用最原始的解决方案来得实在。

网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^