企业官网建设流程全解析

图片下方空白源于img默认inline导致的基线对齐；display:block最直接有效，vertical-align:middle等有兼容性与场景限制，font-size:0或line-height:0副作用大。图片下方空白是行内元素的基线对齐导致的默认情况下 <img> 是行内元素（display: inline），浏览器会按文本基线（baseline）对齐它，留出下降部（descender）空间——这就是图片下方那几像素空白的来源。不是 margin、padding 或 border，改了也没用。哪怕把 margin、padding 全设为 0，空白还在vertical-align 默认值是 baseline，这是罪魁祸首父容器字体大小（font-size）越大，空白越明显display:block 是最直接有效的解法把 <img> 设为块级元素，彻底脱离行内布局上下文，基线对齐失效，空白自然消失。适用所有现代浏览器，包括 IE8+不影响图片本身渲染，只改变其盒模型参与方式如果图片需要和其他文字同行显示（比如图标+文字），就不能用这个方案img { display: block;}vertical-align: middle 也能解决但有陷阱不改盒模型，只调对齐方式，看似轻量，但实际依赖父容器的 line-height 和字体设置，容易在嵌套或响应式场景下失效。vertical-align: top、bottom、middle 都能消除空白，但 middle 并非绝对居中，而是相对于父元素 x-height 对齐若父容器 line-height 很大，vertical-align: middle 可能让图片上移过多在 flex 或 grid 容器里，vertical-align 根本不生效其他常见误操作和替代方案有人试过 font-size: 0 或 line-height: 0，虽能压掉空白，但副作用太强：前者会让子元素字体继承异常，后者影响行高计算，尤其在图文混排时极易翻车。 RedClaw 百度推出的手机端万能AI Agent助手