inline元素设置width和height无效是因为CSS规范规定其盒模型属性对布局无影响，浏览器会忽略它们；应改用inline-block、block、flex或grid等显示类型。
为什么 inline 元素设置 width 和 height 没效果
因为 CSS 规范明确规定：inline 元素的 width、height、margin-top、margin-bottom 等盒模型属性对布局无影响。浏览器会忽略它们，只按内容宽度和行高（line-height）排版。这不是 bug，是标准行为。
哪些显示类型能让宽高生效
把元素改成能参与块级布局或替换元素布局的类型即可。常用且安全的选择有：
-
display: inline-block：保留行内流位置，同时支持宽高、内外边距；适合按钮、图标容器等需要尺寸控制又不想换行的场景 -
display: block：脱离行内流，独占一行，宽高完全生效；适合需要明确尺寸但不介意换行的内联内容（如包裹的标题片段） -
display: flex或display: grid：更现代，但会改变内部子项的布局逻辑，慎用于简单替换
避免用 display: table-cell 或 display: inline-table——语义不符，且可能引入意外的垂直对齐行为。
inline-block 的常见坑点
inline-block 虽好，但默认有「空白间隙」，源于 HTML 中换行/空格被解析为文本节点，导致相邻元素间出现约 4px 间距：
立即学习“前端免费学习笔记（深入）”；
-
解决方法一：父容器设
font-size: 0，子元素再重设字体大小 - 解决方法二：移除 HTML 中元素间的换行和空格（写成
连写） - 解决方法三：用
vertical-align: top/middle/bottom统一对齐，有时能缓解视觉错位
另外注意：inline-block 的 margin 左右有效，上下也有效（区别于纯 inline），但若父容器行高不够，可能被截断——此时优先调 line-height 或改用 block。
要不要用 float 或 position: absolute
不推荐。这两种方式虽然能让宽高“看起来”生效，但代价太大：
-
float会脱离文档流，影响后续元素布局，还需清除浮动，维护成本高 -
position: absolute让元素完全脱离流，失去与其他内联内容的自然对齐关系，响应式下极易错位
真正需要精确控制尺寸和位置时，应从结构层面考虑是否该用语义更合适的标签（比如用 替代 ），而不是靠定位硬压。
最常被忽略的一点：检查是否误加了 display: inline 的全局样式（比如重置 CSS 或框架默认规则），导致本该是 block 的元素被强制变内联——这时宽高失效不是显示类型问题，而是样式覆盖问题。
