Question

此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>

Answer 1

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

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

<强> jsFiddle example

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

为什么无关的填充底部和/或边缘底部？

1 个答案: