设置vertical-align:middle后，img的父元素a高度为何仍大于16？

核心原因 #

这是行内元素的基线对齐机制和默认行高导致的：

• a是行内元素，默认继承的line-height值通常大于16px，行内元素的高度由行框决定，而行框高度基于line-height计算，和内部图片高度不完全绑定
• 给img设置vertical-align: middle只是调整了图片在行框内的垂直位置，并没有改变行框本身的高度，因此a元素高度仍会超过16px

原始代码 #

CSS

.brand-link {
  text-decoration: none;
}

.brand {
  vertical-align: middle;
}

HTML

<a href="#" class="brand-link">
    <img src="https://www.gravatar.com/avatar/89ef9ea23fc4a61a882a2a44f3ccf0b7?s=64&d=identicon&r=PG" alt="brand" width=16 height=16 class="brand">
</a>

三种修复方案 #

方案1：给a元素设置匹配图片高度的行高

让行高等于图片高度，行框会刚好包裹图片，消除额外间距：

.brand-link {
  text-decoration: none;
  line-height: 16px; /* 关键：行高与图片高度一致 */
}

.brand {
  vertical-align: middle;
}

方案2：将a元素设为行内块并固定高度

行内块元素可直接设置高度，避免行内元素默认行高的影响：

.brand-link {
  text-decoration: none;
  display: inline-block;
  height: 16px;
  vertical-align: middle; /* 确保元素与周围内容对齐 */
}

.brand {
  vertical-align: middle;
}

方案3：将图片设为块级元素

块级元素脱离行内流，a元素会自动收缩到图片高度：

.brand-link {
  text-decoration: none;
}

.brand {
  display: block; /* 关键：将图片转为块级 */
}

内容的提问来源于stack exchange，提问作者Fikri Setiawan