CSS设置padding后figure元素上下内边距不一致问题求助

问题原因 #

• 行内元素基线对齐导致底部空隙：<img> 默认是行内块级元素，默认对齐规则为 vertical-align: baseline，会在图片底部预留几像素的空隙用于容纳英文字母的下沉部分（如y、g等字母的下半段），这是底部间距偏大的核心原因。
• 浏览器默认样式干扰：部分浏览器的UA默认样式会给<figcaption>自带上下margin，你没有显式重置的话会额外增加底部间距。
• HTML语法错误：你的代码存在标签未正确闭合的问题，会导致浏览器渲染逻辑异常：
  • h1结束标签错误写为<h1>，正确应为</h1>
  • img是单标签，不需要</img>闭合
  • figure结束标签错误写为<figure>，正确应为</figure>

解决方案 #

第一步：修复HTML语法错误 #

<main id="main">
  <h1 id="title">John Horton Conway</h1>
  <figure id="img-div">
    <img id="conway-photo" src="https://static01.nyt.com/images/2020/04/18/obituaries/14Conway1/14Conway1-mediumSquareAt3X-v2.jpg" />
    <figcaption>J.H.Conway holding a model of polyhedron</figcaption>
  </figure>
</main>

第二步：消除图片底部默认空隙 #

二选一即可：

1. 调整图片对齐方式

#conway-photo {
  height : auto;
  width  : 500px;
  vertical-align: middle; /* 新增这行，替换默认的baseline对齐 */
}

2. 将图片转为块级元素

#conway-photo {
  height : auto;
  width  : 500px;
  display: block;
  margin: 0 auto; /* 块级元素需要手动居中 */
}

第三步：显式设置figcaption的margin #

避免浏览器默认样式影响，按需调整数值匹配顶部间距即可：

figcaption {
  font-size  : 1.5rem;
  background : red;
  margin: 10px 0 0 0; /* 可根据需要自行调整上间距数值 */
}

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