在css中使行内元素正确支持宽高，需要将其 display 属性设置为 inline-block。这样既保留了行内元素的文本流特性，又允许设置 width 和 height。若需完全脱离文档流并精确控制尺寸，也可使用 block 或 flex，但会改变其布局行为。
inline-block与block对宽高的支持差异是什么
将 display 设为 inline-block 时，元素在行内流动且可设宽高；设为 block 时，元素独占一行且可设宽高。主要区别在于是否占据水平空间及是否换行。
span { display: inline-block; width: 100px; height: 50px; background: lightblue; } div { display: block; width: 100px; height: 50px; background: lightgreen; }预期结果：span 元素显示为蓝色矩形，宽度100px，高度50px，与其他行内内容同行排列。div 元素显示为绿色矩形，宽度100px，高度50px，独占一行。
立即学习“前端免费学习笔记（深入）”；
flex容器内的行内子元素如何响应宽高
当行内元素置于 display: flex 容器中时，其默认行为受 flex 属性影响。若未显式设置 flex，子元素可能忽略 width 和 height，除非父容器或子元素有特定约束。
.container { display: flex; } .item { width: 100px; height: 50px; background: lightcoral; }预期结果：在 flex 容器中，.item 元素可能因 flex-grow 默认为1而拉伸，导致实际宽高不等于设定的100px和50px。若需严格遵循宽高，需设置 flex-shrink: 0 和 flex-basis 或使用 align-self 等属性调整。
当行内元素宽高被忽略时，如何通过flex属性强制生效
在 flex 容器中，若行内子元素的 width 和 height 被忽略，可通过设置 flex-shrink: 0 和 flex-basis 来强制其遵循指定尺寸。这确保了子元素不会因容器空间分配而变形。
.container { display: flex; } .item { width: 100px; height: 50px; background: lightcoral; flex-shrink: 0; flex-basis: auto; }预期结果：.item 元素在 flex 容器中严格保持100px宽度和50px高度，不受容器弹性布局影响。
