行内块元素的display值是inline-block，由浏览器ua样式表定义而非自动推断；其换行间隙源于html解析器将换行符视作文本节点，vertical-align默认baseline导致底部留白，需用font-size:0或vertical-align修复。
行内块元素的 display 值是 inline-block，不是浏览器“猜出来”的
浏览器不会根据标签名自动推断 inline-block；它只认 UA 样式表里写死的默认 display 值。比如 <img> 和 <input> 在规范中明确被定义为默认 display: inline-block，而 <span></span> 是 inline，<div> 是 <code>block。你不能靠“长得像按钮”就假设某个元素是 inline-block——必须查 MDN 或用开发者工具看 computed 样式。
inline-block 元素的换行间隙来自 HTML 解析器，不是 CSS
常见现象：多个 <img> 或 <button></button> 写在不同行，渲染后中间出现约 4px 空隙。这不是 margin，也不是 padding，而是 HTML 解析器把换行符和缩进空格当作了文本节点，渲染成一个空格字符。
- 触发条件：父容器有非零
font-size，且子元素是inline或inline-block - 可靠解法：
font-size: 0设在父容器上，再给子元素单独设font-size - 副作用：子元素若含文字，必须显式重置字体大小；否则文字不可见
- 更现代的替代：直接用
display: flex或display: grid，天然规避此问题
inline-block 的 vertical-align 默认值会引发底部留白
<img> 和 <input type="text"> 这类元素即使设了 display: inline-block，也会因默认 vertical-align: baseline 而在下方留出空白——这是基线对齐逻辑导致的，和 margin、padding 无关。
- 验证方式：给父容器加
background: red，就能看到空白区域实际属于行框（line box）高度的一部分 - 快速修复：
vertical-align: top、middle或bottom都可消除留白 - 注意：
vertical-align对block元素无效，只作用于inline、inline-block、table-cell - 替换元素（如
<img>）的基线位置由其固有尺寸和内容决定，不是文字基线，这点常被误判
不要混淆“能设宽高”和“是 inline-block”
很多新手看到 <img> 可以设 width 就以为它是 inline-block，其实它在多数浏览器中默认是 inline，但因为是“替换元素”，CSS 的 width/height 直接作用于其替换内容盒，不走普通行内元素的盒模型限制。
- 真正决定布局行为的是 computed
display值，不是能否设宽高 -
<img>在 Chrome/Firefox 中默认display: inline，但表现接近inline-block（可设宽高、不换行） - 想统一行为？显式写
display: inline-block，避免跨浏览器差异 - 检查手段：打开 DevTools → Elements → Styles → 查看 “Computed” 标签页里的
display行
display，再构建 DOM 和渲染树；inline-block 的行为是这个流程中特定 display 值触发的结果，不是语义或标签名带来的魔法。最容易被忽略的是——那个底部留白和换行间隙，根源都在 HTML 解析阶段，而不是你在 CSS 里漏写了哪条规则。
