行内元素设置width/height不生效，因其display为inline，按文本流渲染且尺寸由内容和字体属性决定；可通过inline-block、block等display值启用宽高支持。
行内元素（如 <span>、<a>、<strong>）设置 width 和 height 通常不生效，根本原因在于其默认的 display 值为 inline —— 浏览器按文本流方式渲染，只占据内容所需空间，忽略宽高声明。
行内元素的布局特性
行内元素不独占一行，会与其他行内内容并排显示；它们的尺寸由内容（文字、子元素等）和字体相关属性（如 line-height、font-size）决定，而非显式设置的 width/height。即使你写了 width: 200px; height: 50px;，浏览器也会直接忽略。
- 水平方向：可设置
padding-left/right、margin-left/right，但对布局影响有限（不会撑开父容器宽度） - 垂直方向：
padding-top/bottom和margin-top/bottom虽然能生效，但不会影响行高或邻近元素的垂直位置（可能造成视觉重叠） - 真正影响行内元素垂直空间的是
line-height和父容器的font-size
块级元素为何能设置宽高
块级元素（如 <div>、<p>、<h1>）默认 display: block，天然具有“盒子模型”行为：独占一行、可设宽高、支持全部内外边距与边框。它的尺寸由 CSS 显式控制，不受文本流限制。
- 设置
width会严格约束内容区宽度（除非内容溢出） - 设置
height会固定高度，内容超出时可通过overflow控制显示方式 - 所有
margin、padding、border都按预期参与盒模型计算
让行内元素支持宽高的常用方法
想保留语义或结构但又需要控制尺寸，可通过修改 display 值来切换渲染模式：
立即学习“前端免费学习笔记（深入）”；
-
display: inline-block：最常用方案。既保持行内排列特性（不换行），又获得块级盒子能力（支持宽高、垂直对齐、完整盒模型） -
display: block：完全转为块级，适合需独占一行且需宽高的场景（如按钮、图标容器） -
display: table-cell：适用于需等高、垂直居中或模拟表格布局的特殊需求 - 现代方案：
display: inline-flex或display: inline-grid，在保持行内流的同时启用弹性或网格布局能力
注意 margin 和 vertical-align 的联动影响
当把行内元素改为 inline-block 后，虽然宽高生效了，但默认 vertical-align: baseline 可能导致上下错位；同时，inline-block 元素间的空白符（换行/空格）会被渲染为一个空格，造成意外间隙。
- 解决错位：显式设置
vertical-align: top/middle/bottom - 消除间隙：父容器设
font-size: 0，再在子元素中重置字体大小；或移除 HTML 中的空白符；或用注释 消除换行 - 慎用
float：虽也能让行内元素响应宽高，但会脱离文档流，带来清除浮动等额外问题，不推荐作为首选
