为何设置container-type: inline-size后按钮宽度塌陷而span正常？

先看你的代码示例：

<span style="container-type: inline-size; outline: 1px solid blue;">
  This is a span
</span>

<button style="container-type: inline-size;">
  This is a button        
</button>

原因拆解： #

• span的正常表现：
  span是默认的inline非替换元素，设置container-type: inline-size只是给它加上了容器查询的上下文，并没有改变它原本的宽度计算规则——它的宽度依然由内部文本内容自然撑开，所以outline能完整包裹住文本，看起来完全正常。

• button的宽度塌陷：
  button属于特殊的inline-block表单控件，浏览器默认会给这类元素一套专属的布局逻辑：宽度自适应内容长度，避免文本随意换行。但当设置container-type: inline-size时，这个属性会隐含触发contain: layout规则，强制button建立独立的布局上下文，同时直接覆盖了浏览器为表单控件预设的宽度计算逻辑。

  此时button会像普通的inline-block元素一样，在没有显式设置宽度的情况下，自动收缩到能容纳内容的最小尺寸（文本可能因此换行），就出现了你看到的“宽度塌陷”。

修复方法： #

如果想让button恢复自适应内容的宽度，只需要显式设置width: fit-content即可：

<button style="container-type: inline-size; width: fit-content;">
  This is a button        
</button>

内容的提问来源于stack exchange，提问作者Rogier de Ruijter