为什么会有多余的 padding-bottom 和/或 margin-bottom？答案

【问题标题】：Why the extraneous padding-bottom and/or margin-bottom?为什么会有多余的 padding-bottom 和/或 margin-bottom？
【发布时间】：2013-11-01 01:26:09
【问题描述】：

这个jsFiddle 说明了这个问题指的是什么（下面的完整代码）。请注意，即使 #outer-div 应该有 0 padding，而 #inner-div 应该有 0 margin-bottom，看起来好像在 #outer-div 和 #inner-div 的底部边缘之间有一些填充和/或边距.

这是从哪里来的，更重要的是，我该如何压制它？

css

html,body,div{margin:0;padding:0;border:0;outline:0}
body{background:white;}
#outer-div{
  background:lightgray;
  margin-top:20px;
  text-align:center;
}
#inner-div{
  background:black;
  display:inline-block;
}

html

<!doctype html>
<body>
<div id="outer-div">
  <div id="inner-div" style="background:black;width:100px;height:100px;">
    <div style="background:orange;margin:1px;width:96px;height:96px;padding:1px;">
      <div style="background:white;margin:1px;width:94px;height:94px;"></div>
    </div>
  </div>
</div>

【问题讨论】：

标签： css

【解决方案1】：

内联元素对空白很敏感，并且空白是为下行元素保留的。将vertical-align:top 添加到#inner-div 是解决此问题的一种方法：

#inner-div {
    background:black;
    display:inline-block;
    vertical-align:top;
}

jsFiddle example

第二种方法是在这个jsFiddle example的父元素上设置font-size:0。

【讨论】：

另一种方法是降低样式元素中设置的内部div的高度
@LiamSorsby - 你测试了吗？
谢谢！很高兴学习效果很好的答案。然而，令人惊讶的是，我发现答案也令人沮丧，因为它让我相信我永远不会掌握 CSS：对于我的小大脑来说，像这样的令人困惑/不可预测的怪癖太多了……例如。我使用display:inline-block 只是因为它是我能找到的唯一一个CSS voodoo，用于将div 居中在另一个div 中。你的回答让我意识到display:inline-block 带来了所有其他意想不到的包袱，我害怕下一个奇怪的怪癖会出现在我身上（当然是截止日期的前一天晚上）......
@kjo - 不要对自己失望，我们都是来互相学习的。你使用 CSS 的次数越多，你就会越熟练。给它时间。
@Kjo - 不幸的是，大多数 web 开发人员对待 CSS 的典型方式就是这么多的巫术。很少有人会在该主题中寻找适当的基础，以使他们能够正确理解像您这样的情况下正在发生的事情。事实上，我发现获得适当基础的唯一方法是通读 CSS 2.1 规范本身，仔细反复阅读，因为它不容易阅读，而且所说内容的含义并不总是立竿见影很明显。