CSS inline-block 为什么会导致这个 div 有高度

在本文中，我们将介绍为什么 CSS 中的 inline-block 属性会导致某些 div 元素具有高度，并提供一些示例来说明这个问题。

阅读更多：CSS 教程

什么是 inline-block？

inline-block 是 CSS 中的一个属性，它能够将元素呈现为内联元素和块级元素的混合。具体来说，当元素设置为 inline-block 时，它会像常规的内联元素一样在水平方向上排列，但同时它也可以设置宽度、高度和外边距等属性，就像块级元素一样。

inline-block 导致元素高度的原因

CSS 中的 inline-block 属性会导致某些 div 元素具有高度，是因为 inline-block 创建了一个基线对齐的上下文。在这个上下文中，元素之间会有一些额外的空间，用于容纳可能存在的文字下行部分。这就是为什么一些没有内容的 div 元素也会有高度的原因。

为了更好地理解这个问题，我们来看一个示例。假设我们有以下的 HTML 结构和 CSS 样式：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.container {
  background-color: lightgray;
}

.box {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: orange;
  margin: 10px;
}

在这个示例中，我们定义了一个容器元素 container 和三个具有 inline-block 属性的 box 元素。我们设置了每个 box 元素的宽度、高度以及外边距。当我们运行这段代码时，我们会发现 box 元素之间有额外的垂直空间，造成了 div 元素整体的高度增加。

如何解决高度问题

虽然 inline-block 属性会导致一些 div 元素有高度，但我们可以通过一些方法来解决这个问题。下面是一些常用的解决方法：

1. 使用 float 属性

我们可以将 inline-block 元素的父元素设置为浮动（float），这样可以消除行框 (line box) 中的额外空间。这个方法在许多情况下都很有效。我们可以将上面示例代码中的 container 元素的样式修改为：

.container {
  background-color: lightgray;
  float: left;
}

2. 使用 vertical-align 属性

inline-block 元素的默认垂直对齐方式是基线对齐，我们可以通过修改 vertical-align 属性来解决高度问题。将上面示例代码中的 box 元素的样式修改为：

.box {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: orange;
  margin: 10px;
  vertical-align: top;
}

这样可以将元素的垂直对齐方式设置为顶部对齐，使得元素在容器中不再具有额外的高度。

总结

在本文中，我们介绍了为什么 CSS 中的 inline-block 属性会导致某些 div 具有高度，并提供了一些解决方法。通过了解 inline-block 属性创建的基线对齐上下文以及使用浮动和 vertical-align 属性来调整元素的高度，可以帮助我们更好地处理这个问题。实际的 CSS 布局中，我们需要根据具体情况选择合适的方法来解决高度问题，以达到设计的要求。