使用HTML figure标签包裹图片出现向右偏移的原因是什么

核心原因 #

该问题由浏览器自带的默认用户代理样式触发：

• 所有主流浏览器的默认样式表都会给<figure>元素设置默认边距，常规取值为margin: 1em 40px，也就是左右各有40px的外边距
• 你定义的.tile容器宽度固定为300px，内部<figure>的左外边距会将包含的图片向右挤压，最终出现偏移；移除<figure>后没有这部分默认边距，图片位置自然符合预期。

修复方案 #

可以通过覆盖<figure>默认样式解决，两种常用方案按需选择：

1. 仅针对当前场景修复
   在现有CSS中添加对应规则清除边距即可：

.tile figure {
  margin: 0;
  /* 若存在额外偏移可补充 padding: 0 清除默认内边距 */
}

2. 全局样式重置（适合项目级通用处理）
   在项目全局CSS最顶部添加重置规则，一次性清除所有元素默认边距，避免同类问题反复出现：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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