HTML语义化中 figure 标签对图片尺寸的影响及解决方案

figure 标签的默认外边距会导致嵌套图片尺寸异常缩小，解决方案是通过 CSS 重置其默认外边距。

• 现象：当 <img> 元素嵌套在 <figure> 标签内时，图片尺寸可能远小于预期，尤其在父容器设置宽度限制（如 max-width: 180px）且图片应用 max-width: 100% 的情况下。

  示例代码中，.accommodation-item 容器设置 max-width: 180px，.accommodation-picture 图片设置 width: 180px，但实际显示尺寸异常缩小。

• 根本原因：

  <figure> 是块级元素，浏览器默认会为其添加外边距（如 margin: 1em 或 40px），这些外边距会占据内部空间，导致 <img> 的可用布局区域减小。

  当 <img> 应用 max-width: 100% 时，它会根据 <figure> 的实际内容宽度调整尺寸，而非父容器（如 .accommodation-item）的宽度，从而引发异常缩小。

• 重置 <figure> 的默认外边距：

  在 CSS 中显式设置 figure { margin: 0; }，消除默认外边距对布局的影响。

  修复后，<img> 将根据 .accommodation-item 的 max-width: 180px 和自身 width: 180px 正确显示。

• CSS 部分：figure { margin: 0; /* 关键修复：重置 figure 默认外边距 */}img { max-width: 100%; height: auto;}.accommodation-item { background-color: white; border-radius: 10px; box-shadow: 10px 5px 5px #E0DDDD; margin-right: 10px; margin-left: 10px; margin-bottom: 10px; width: min-content; max-width: 180px; cursor: pointer;}.accommodation-picture { border: 3px solid white; border-radius: 10px 10px 0px 0px; box-sizing: border-box; width: 180px; height: 100px; object-fit: cover;}
• HTML 部分（优化可访问性）：<section id="accommodation-content"> <article id="acccommodation-city"> <nav id="accommodation-nav"> <article class="accommodation-item"> <figure> <img class="accommodation-picture" src="
  https://i.sstatic.net/Mbjwm.jpg"
  alt="Auberge la Cannebière 酒店客房图片" title="Auberge la Cannebière 酒店客房"> </figure> <h5>Auberge la Cannebière</h5> <p>Night starting at <strong>25€</strong></p> </article> </nav> </article></section>

• CSS Reset 或 Normalize.css：

  浏览器默认样式差异可能导致布局问题，建议在项目初期引入 CSS Reset 或 Normalize.css，统一基础样式。

  例如，Normalize.css 会重置 <figure> 的默认外边距，避免手动修复。

• 其他布局优化：

  使用 box-sizing: border-box 确保边框和内边距不增加元素总宽度。

  结合 Flexbox 或 Grid 布局时，注意父容器宽度限制对子元素的影响。

• 问题本质：<figure> 的默认外边距挤压了内部图片的可用空间，导致 max-width: 100% 的图片尺寸异常缩小。
• 解决方案：通过 CSS 重置 <figure> 的外边距（margin: 0），确保图片按预期显示。
• 扩展建议：使用 CSS Reset 或 Normalize.css 统一默认样式，减少浏览器兼容性问题。