行内元素设 width/height 无效是规范行为而非 bug；因其盒模型受限于行内框，宽高由内容撑开，仅 padding-left/right、border、line-height、font-size 可影响尺寸；替换元素（如 img、input）例外；最常用解法是 display: inline-block，需配合 vertical-align 避免错位。
行内元素（display: inline）设 width 和 height 无效，不是你写错了，是浏览器按规范故意忽略——这不是 bug，而是 CSS 的底层行为。
为什么 span、a、strong 这类元素宽高不生效
因为它们的盒模型被限制在“行内框”（inline box）中：宽高由内容撑开，width/height、margin-top/margin-bottom 全部被忽略。你能影响的只有 padding-left/padding-right、border、line-height（控制行框高度）、font-size（间接撑高）。
- 常见误判：给
<span>按钮</span>直接加width: 120px; height: 40px;，结果完全没变化 - 替换元素例外：
<img>、<input>本身是替换元素，原生支持宽高，无需改display - 注意：IE6/7 在怪异模式下曾部分支持 inline 元素宽高，但现代标准模式下一律失效
display: inline-block 是最常用且安全的解法
它保留行内流特性（不换行、能和文字并排），同时激活完整盒模型——width、height、margin（含上下）、padding 全部可用。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须显式设置
vertical-align，否则默认baseline会导致和文字错位（比如按钮下沉） - HTML 源码中的换行/空格会渲染成一个空格，造成意外间隙；可用父容器
font-size: 0+ 子元素重设字体，或删掉 HTML 中的换行 - 对
<img>这类替换元素也适用：设display: inline-block后，vertical-align才真正生效
span.btn {
display: inline-block;
width: 96px;
height: 36px;
line-height: 36px;
text-align: center;
vertical-align: middle; /* 关键！别漏 */
}其他方案的适用边界和风险
display: block、float: left、position: absolute 都能让宽高生效，但本质是脱离原有布局上下文，需权衡副作用：
立即学习“前端免费学习笔记（深入）”；
-
display: block：强制独占一行，后续兄弟元素会换行——适合按钮组中最后一个元素，不适合中间穿插的文字链接 -
float: left：元素脱离文档流，后续内容会环绕，必须清除浮动（clear: both或 BFC 触发），否则影响布局 -
position: absolute：完全脱离流，需父容器设position: relative，且不再参与文本流排版——适合图标、角标等装饰性元素 -
display: flex或display: grid：父容器用这些布局，子元素即使inline也会被拉伸，但这是父级控制，不是子元素自身设宽高
真正容易被忽略的细节
改完 display 只是第一步。调试时卡住的往往不是宽高不生效，而是：vertical-align 值没统一、行内空格导致间隙、line-height 和 height 冲突、父容器 white-space 或 font-size 透传影响尺寸。这些细节比选哪个 display 值更耗时间。
