0

这个jsFiddle说明了这个问题指的是什么（下面的完整代码）。请注意，即使#outer-div应该有 0padding并且#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>
4

1 回答 1

1

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

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

jsFiddle 示例

第二种方法是font-size:0在这个jsFiddle 示例中设置父元素。

于 2013-11-01T01:28:46.037 回答