问题成因与原理
内边距的作用及 figure 的布局影响
在使用 figure 元素来包裹图片与说明文字时，内边距会直接影响图片与文字之间的留白以及整体排版密度。对于一些现有的布局，figure 的左右内边距过大会导致同列元素出现错位，尤其是在网格或栅格布局中更为明显。本文聚焦如何通过现代 CSS 属性来调控这种现象。
在现代浏览器中，padding-inline 作为控制左右方向的逻辑属性，提供了比传统 padding-left/padding-right 更贴合文本方向的控制方式。通过对 figure 使用 padding-inline，可以快速实现对称的左右留白，而不影响竖直方向的布局节奏。
需要关注的是，盒模型与宽度计算之间的关系也会影响最终效果。将 box-sizing: border-box 应用到 figure 上，可以确保 padding 在既定宽度内不会破坏布局结构。
通过 padding-inline 调整左右间距的实操
基础用法与示例
如果你的图片和文字需要更紧凑的左右留白，可以直接为 figure 设置较小的 padding-inline 值。通过这种方式，左右间距的调整变得直观，并且对响应式布局友好。
/* 基础用法：把 figure 的左右内边距设为 8px，竖向内边距保持默认或自定义 */
figure { padding-inline: 8px; padding-block: 0; box-sizing: border-box; }如果需要更明确的方向性，也可以分别设置 padding-inline-start 和 padding-inline-end，从而在双向语言环境中获得更精准的控制。
/* 逐边控制示例（等价于 padding-inline 的分解写法） */
figure { padding-inline-start: 8px; padding-inline-end: 8px; }跨浏览器兼容与实践注意
兼容性提醒
padding-inline 属于 CSS 的逻辑属性，在大多数现代浏览器中得到良好支持，但在极老版本的浏览器中可能不被识别。因此，在具体实现时提供回退方案是一个稳妥的做法。
一种常见的回退策略是同时设置 padding-left/right，以确保旧版浏览器呈现一致的左右留白。
/* 回退方案：提供 padding-inline 的同时设置左右 padding 以兼容旧浏览器 */
figure { padding-inline: 12px; padding-left: 12px; padding-right: 12px; }响应式布局中的实战场景
移动端与桌面端的 padding-inline 调整
在响应式设计中，图像容器 figure 常出现在网格单元内，统一使用 padding-inline 可以保持左右对齐，避免在不同屏幕宽度下出现不均匀的侧边距。
结合 CSS 函数 clamp，可以实现随屏幕宽度变化的留白区域，保持视觉一致性。
/* 响应式留白：随视口宽度变化的内边距 */
figure { padding-inline: clamp(6px, 2vw, 24px); }常见误解与正确观点
误解与澄清
一个常见误解是认为内边距只是美观作用，不会影响布局。实际情况是，上游容器的宽度、边距与 figure 的 padding会共同影响最终的布局密度，尤其在网格和 Flex 布局中。
另一个误解是认为 padding-inline 必须在所有场景下都生效。要理解逻辑属性的局限性，在不被支持的环境中，应回退到传统属性以确保可访问性与一致性。
正确的做法是结合 box-sizing: border-box 与 padding-inline 使用，确保宽度计算可预测且易于对齐。
