Question

我今天在设计中遇到了一个奇怪的行为。我先向你展示我的代码然后讨论它

*,
*:after,
*::before {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body,
html {
  height: 100%;
  padding: 0;
}
#all-content,
#content-outer,
#content-inner {
  height: 100%;
  position: relative;
}
#content-inner {
  overflow-y: scroll;
}
.block {
  display: inline-block;
  font-size: 0;
  background-color: yellow;
  width: 50px;
  height: 50px;
  border: 3px solid black;
}

<div id="all-content">
  <div id="content-outer">
    <div id="content-inner">
      <div id="main-field">
        <div class="block">text</div>
        <div class="block">text</div>
        <div class="block">text</div>
        <div class="block">text</div>
      </div>
    </div>
  </div>
</div>

问题是，使用此代码，有一个奇怪的顶部填充应用于#main-field元素。有两种方法可以解决此问题。将line-height : 50px规则应用于.block类或将font-size更改为非零值。我想知道为什么会发生这种情况，因为我从来没有遇到像这种行为一样奇怪的事情。

Answer 1

你为什么要设置font-size:0？我猜你正在尝试从inline-block元素之间删除空格的方法之一，但在这种情况下，你需要在父上指定font-size:0在您的案例中inline-block元素（可能是#main-field），然后在inline-block元素本身上重新指定字体大小。

看看你如何给你的元素一个固定的宽度，那么你可能根本就不需要这个hack，应该只使用float:left和display:block。

Answer 2

这就是为什么你不使用“hack”去除块内联元素之间的空间。即使字体大小为0，文本仍然具有行高，并且可能不知道如何表现它需要“块”上方的空间。

一个简单的解决方案，如果您仍想使用您的代码，请添加：

vertical-align:top

到您的块元素： FIDDLE

注意：使用float：）

为什么`font-size：0`会以某种方式影响`line-height`

2 个答案: