行内元素默认不支持设置width、height、margin-top/margin-bottom，因其只占据内容所需空间；最常用且兼容性好的解决方法是设为display: inline-block，既保持同行排列又支持完整盒模型。
行内元素（inline）默认不支持设置 width、height、margin-top/margin-bottom 等盒模型属性，这是由其渲染特性决定的。想让它支持宽高和上下外边距，最常用且兼容性好的方法是把它变成 inline-block。
为什么 inline 元素不能设宽高？
因为 inline 元素会和其他文字一样“贴着走”，只占据内容所需空间，浏览器会忽略你写的 width/height/margin-top/margin-bottom。比如 、、、 都是典型的 inline 元素。
用 display: inline-block 解决
它保留了 inline 的“同行排列”特性，又让元素拥有完整的盒模型——可以设宽高、内外边距、边框，还能用 vertical-align 对齐。
- 写法很简单：display: inline-block;
- 常见场景：导航菜单中的 标签、按钮组、图标文字混排的标签
- 注意：inline-block 元素之间会产生**空白间隙**（源于 HTML 中的换行/空格），可用 font-size: 0 或注释删空格等方式消除
其他可行但需谨慎的方式
- display: block + float: left：能设宽高，但脱离文档流，后续布局易出错，已不推荐
- display: table-cell：支持宽高，但语义不符，且默认有表格行为（如等高），适用场景窄
- CSS Grid / Flex 子项：如果父容器是 display: grid 或 flex，子元素即使原本是 inline，也会变成“flex item”或“grid item”，自动支持尺寸控制——但这属于布局上下文改变，不是元素自身属性变化
基本上就这些。inline-block 是最直接、低侵入、广泛支持的解法，记住它，日常够用。
立即学习“前端免费学习笔记（深入）”；
