为什么按照内联块的正常流程尊重宽度/高度答案

【问题标题】：Why is width/height respected in accordance to normal flow for inline-block为什么按照内联块的正常流程尊重宽度/高度
【发布时间】：2022-10-07 01:33:01
【问题描述】：

为什么设置宽度/高度和填充等与 display: inline-block 相比 display: inline ？据我了解，内部display: inline-block 的外部显示类型为inline，内部显示类型为flow-root，display: inline 的外部显示类型为inline，内部显示类型为flow。我不明白将内部显示类型设置为flow-root 如何有助于使inline-block 元素的宽度/高度等被视为正常流程的一部分。设置宽度和高度会改变元素的盒子模型的宽度和高度，但它的外部显示类型仍然是内联的。这意味着该元素仍然参与其父级的内联格式化上下文，其中它的框模型宽度/高度等在正常流程中不占用空间。

例如，.inline p 元素被允许更改其盒子模型的填充，但盒子模型宽度/高度的变化不会导致它在正常流程中占用空间，所以即使盒子模型变大，它不会将其他盒子向下推。

但是，更改.inline-block p 元素的填充确实会使其在正常流中占用空间。

我不明白如何理解将内部类型更改为 flow-root 会使带有 display: inline-block 的元素突然将其宽度/高度等视为正常流程的一部分，因为它们的外部显示类型仍然是内联的。

.inline {
  display: inline;
  padding: 30px ;
  border: 1px solid blue;
}

.inline-block {
  display: inline-block;
  padding: 20px;
  border: 1px solid green;
}

<div>
  <p class=\"inline\">
  inline
  </p>
  This is some filler text
</div>
<div>
  <p class=\"inline-block\">
  inline-block
  </p>
  This is some filler text
</div>

我觉得你在这方面想多了。规范详细说明了每种情况：w3.org/TR/CSS22/visudet.html 和 inline-block 与 inline 不同。它们有相似之处，但并非 100% 相同

标签： css

【解决方案1】：

并非所有行为都由显示内部或外部类型自己捕获，而且绝对不像流与流根那么简单。

我们可以将内联元素分为两种类型，一种是应用高度和宽度以及垂直填充和边距影响线框高度的一种，另一种不影响行框高度的。

在第一类中，我们有

display: values                  │ inner display type 
─────────────────────────────────┼───────────────────
inline (replaced elements)       │ not defined in CSS¹
inline-block                     │ flow-root
inline-table                     │ table
inline-flex                      │ flex
inline-grid                      │ grid

在第二类中，我们有

display: values                  │ inner display type 
─────────────────────────────────┼───────────────────
inline (non-replaced elements)   │ flow
inline list-item                 │ flow
ruby ²                           │ ruby

第一类中的类型还有其他几个共同特征。它们是原子的（不会跨行框碎片化）、不透明的（它们的内容不会影响对等框的布局，除非通过暴露基线）并为其内容建立独立的格式化上下文。

第二类没有这些特征。这组特征似乎是作为内联元素的一个包出现的，但规范只是确定了在每种情况下适用的类别，而没有命名类别。

我不确定这对你有帮助，但我认为值得展示更全面的画面。

_{¹ 实际上，所有的内联级替换元素（包括那些分配给display:ruby 的元素）在 CSS 中都有一个未定义的内部显示类型，属于第一类。}

【讨论】：