在使用figure标签实现多张图片水平排列的场景中，不少开发者会发现最终呈现的效果并非整齐的水平排列，而是出现了类似梯形的错位排列，这和预期效果存在明显差异。这种异常现象并非figure标签本身的功能缺陷，而是由样式配置不当导致的。
figure标签的默认样式特性
figure标签是HTML5中用于定义独立内容的语义化标签，默认情况下会带有一定的上下外边距，并且是块级元素，会独占一行。如果直接对多个figure标签设置水平排列，没有清除默认样式，就容易出现排列异常。
我们可以通过以下代码查看figure的默认样式表现：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>figure默认样式示例</title>
<style>
/* 未清除默认样式的figure */
.img-container {
width: 800px;
border: 1px solid #ccc;
}
figure {
/* 仅设置宽度，未处理默认样式 */
width: 150px;
}
figure img {
width: 100%;
}
</style>
</head>
<body>
<div class="img-container">
<figure>
<img src="https://picsum.photos/150/150?random=1" alt="示例图片1">
<figcaption>图片1</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/150/150?random=2" alt="示例图片2">
<figcaption>图片2</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/150/150?random=3" alt="示例图片3">
<figcaption>图片3</figcaption>
</figure>
</div>
</body>
</html>
导致梯形效果的核心原因
1. 未清除默认外边距与块级特性
figure标签默认的上下外边距会导致每个figure元素之间存在垂直方向的间隙，同时块级元素默认独占一行的特性，如果没有设置浮动或者弹性布局，多个figure会依次换行排列，若父容器宽度不足，就会出现错位，视觉上呈现梯形效果。
2. 垂直对齐属性配置错误
当使用display: inline-block让figure水平排列时，inline-block元素的默认垂直对齐方式是基线对齐，而figure内部如果有<figcaption>标签，会导致每个figure的基线位置不一致，进而出现高低错落的梯形排列。
3. 父容器宽度计算偏差
如果给figure设置了固定宽度，同时没有计算默认外边距、内边距的宽度，会导致多个figure的总宽度超过父容器宽度，后面的figure会被挤到下一行，形成阶梯状的梯形排列效果。
修复梯形效果的解决方案
方案一：清除默认样式并配置弹性布局
弹性布局是目前实现水平排列最稳定的方式，同时清除figure的默认外边距即可避免梯形问题：
.img-container {
display: flex;
gap: 10px; /* 控制图片之间的间距 */
width: 800px;
border: 1px solid #ccc;
padding: 10px;
}
figure {
margin: 0; /* 清除默认外边距 */
width: 150px;
}
figure img {
width: 100%;
display: block; /* 避免图片底部出现间隙 */
}
方案二：使用浮动布局并清除浮动
如果项目需要兼容较旧的浏览器，可以使用浮动布局，同时清除父容器的浮动：
.img-container {
width: 800px;
border: 1px solid #ccc;
overflow: hidden; /* 清除浮动 */
padding: 10px;
}
figure {
margin: 0 10px 0 0; /* 仅保留右侧间距 */
width: 150px;
float: left; /* 设置左浮动实现水平排列 */
}
figure img {
width: 100%;
display: block;
}
方案三：调整inline-block的垂直对齐方式
如果使用inline-block实现排列，需要统一设置垂直对齐方式：
.img-container {
width: 800px;
border: 1px solid #ccc;
padding: 10px;
}
figure {
margin: 0 10px 0 0;
width: 150px;
display: inline-block;
vertical-align: top; /* 统一顶部对齐，避免基线错位 */
}
figure img {
width: 100%;
display: block;
}
总结
figure标签本身不会导致图片水平排列出现梯形效果，问题根源大多在于没有处理标签的默认样式、布局属性配置不当。开发者在实际开发中，需要先清除figure的默认外边距，再根据项目需求选择合适的布局方式，同时统一子元素的对齐属性，就能避免梯形排列的异常，实现整齐的图片水平排列效果。