为什么 `font-size : 0` 会影响 `line-height`

Question

我在设计中遇到了一个奇怪的行为today.lets我先给你看我的代码然后再讨论它

*,
*: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 class 来修复 this.Either 或将字体大小更改为非零的值。我想知道为什么会这样，因为我从来没有遇到过像这种行为这样奇怪的事情。

Answer 1

为什么要设置 font-size:0？我猜您正在尝试从 inline-block 元素之间删除 white-space 的方法之一，但在这种情况下，您需要在 [=22= 上指定 font-size:0 inline-block 元素（即 #main-field）的 ]parent，然后在 inline-block 元素本身上重新指定字体大小。

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

Answer 2

这就是为什么您不使用 "hack" 来删除块内联元素之间的 space 的原因。即使字体大小为 0，文本仍然具有行高并且可能不知道如何表现它需要 space 高于 "block"。

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

vertical-align:top

到您的块元素：FIDDLE

注意：使用浮点数:)

为什么 `font-size : 0` 会影响 `line-height`

why does `font-size : 0` somehow affects `line-height`

html

css

font-size