html - 为什么 inline-block 会根据它的 child 的宽度自动调整它的宽度？

Question

如果这个问题已经在 stackoverflow 上陈述过，请纠正我!如果有，我深表歉意，但我一直在寻找一段时间，只找到了如何而不是为什么。

我的问题是:父 div 似乎会自动占据页面的整个宽度，除非 { display: inline-block; } 是为它指定的。指定后，它会根据其子元素的宽度调整其宽度。这确实很有用，但我觉得了解为什么会发生这种情况对我来说很重要。这是一些用于视觉表示的代码。提前致谢!

编辑:我看到有些人将我的问题标记为重复，但请告诉我在另一个问题中它解释了为什么 display inline-block 会自动调整到它的 child 的高度和宽度。谢谢!

#wrapper {
  border: 1px solid black;
  display: inline-block;
}
#child_div {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  margin: 10px;
}

<div id="wrapper">
  <div id="child_div"></div>
</div>

Answer 1

display: inline-block 基本上是 display: inline;(span 的默认值， strong、em 等)和 display: block;(默认为 div、p等)。

内联元素是为文本构建的，因此它们应该与文本内联，并且只和它们包含的文本一样宽。因此，您无法设置 inline 元素的宽度。

block 元素默认填充所有可用宽度，因此在它们自己的行上而不是内联流动。这对于段落之类的内容很有用，但有时您需要较短的行，因此可以调整 block 元素的宽度。

行内 block 元素在中间。它们像 display: inline; 元素一样以内联方式流动，但你可以像 display: block; 元素一样设置宽度。