Flex布局是前端弹性布局的核心方案，当内联元素作为Flex项目的子元素时，其垂直方向Padding的计算行为会和普通文档流下有明显区别，这也是很多开发者在调试布局时容易踩坑的点。
普通文档流中内联元素垂直Padding的表现
在普通文档流中，内联元素的垂直方向Padding虽然会被渲染，但不会影响到行高的计算，也不会挤压其他行的元素。我们可以通过下面的代码验证这个特性。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>普通文档流内联元素Padding测试</title>
<style>
.normal-container {
width: 500px;
border: 1px solid #333;
margin-bottom: 20px;
}
.inline-ele {
padding: 20px 0; /* 垂直方向设置20px padding */
background-color: #e8f4ff;
}
</style>
</head>
<body>
<div class="normal-container">
这是一段普通文本，包含<span class="inline-ele">内联元素</span>，观察垂直padding的表现
</div>
</body>
</html>运行上述代码可以看到，内联元素的背景会在垂直方向扩展20px，但是不会增加当前行的高度，也不会把上下两行的内容挤开，垂直Padding不会影响行盒的尺寸计算。
Flex布局中内联元素垂直Padding的计算规则
当内联元素被放在Flex容器中作为Flex项目时，Flex容器的display: flex属性会改变子元素的格式化上下文，此时内联元素的垂直Padding计算会出现变化。
Flex项目为内联元素的基础测试
我们先看一个基础的Flex布局测试代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex布局内联元素Padding测试</title>
<style>
.flex-container {
display: flex;
width: 500px;
border: 1px solid #333;
align-items: flex-start; /* 避免默认拉伸影响测试 */
margin-bottom: 20px;
}
.flex-item {
padding: 20px 0; /* 垂直方向设置20px padding */
background-color: #e8f4ff;
}
</style>
</head>
<body>
<div class="flex-container">
<span class="flex-item">Flex容器中的内联元素</span>
<span class="flex-item">第二个内联项目</span>
</div>
</body>
</html>运行后可以发现，此时内联元素的垂直Padding会被纳入Flex项目的主尺寸计算，项目的高度会明显增加，垂直方向的Padding会正常撑开项目尺寸，和普通文档流的表现完全不同。
不同Flex对齐方式下的表现差异
Flex容器的align-items属性会影响交叉轴方向的项目尺寸计算，我们来看不同取值下的表现：
- align-items: flex-start/stretch：当设置为
flex-start时，项目高度由自身内容加Padding决定；设置为stretch时，如果项目没有固定高度，会拉伸到容器高度，此时垂直Padding会在拉伸后的尺寸基础上额外计算。 - align-items: center：项目高度由内容和Padding共同决定，垂直方向居中时会包含Padding的区域。
下面的代码可以验证stretch场景的表现：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>stretch场景测试</title>
<style>
.flex-stretch {
display: flex;
align-items: stretch;
width: 500px;
height: 100px;
border: 1px solid #333;
}
.stretch-item {
padding: 10px 0;
background-color: #ffe8e8;
}
</style>
</head>
<body>
<div class="flex-stretch">
<span class="stretch-item">拉伸场景下的内联项目</span>
<span class="stretch-item">另一个项目</span>
</div>
</body>
</html>此时内联项目会被拉伸到容器100px的高度，加上上下各10px的Padding，项目实际占据的垂直空间是120px，会被容器溢出隐藏，这也说明Padding是在拉伸尺寸基础上额外计算的。
核心差异总结
我们可以通过下面的表格清晰对比两种场景的差异：
| 场景 | 垂直Padding是否影响元素尺寸 | 是否影响相邻元素位置 |
|---|---|---|
| 普通文档流内联元素 | 否，仅渲染背景扩展 | 否 |
| Flex布局内联元素（作为Flex项目） | 是，计入项目尺寸计算 | 是，会挤压同交叉轴其他项目空间 |
实际开发注意事项
在实际开发中，如果需要在Flex容器中使用内联元素作为项目，并且需要设置垂直方向的内边距，需要注意以下两点：
- 如果希望内联元素保持和普通文档流一致的垂直Padding表现，可以给内联元素设置
display: inline-block，将其转换为行内块元素，此时在Flex容器中其垂直Padding的计算会符合预期。 - 如果Flex容器设置了固定高度，并且
align-items为stretch，需要注意垂直Padding可能会导致项目内容溢出容器，需要提前做好溢出处理。
下面的代码展示了转换为行内块后的表现：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内块元素测试</title>
<style>
.flex-inline-block {
display: flex;
width: 500px;
border: 1px solid #333;
align-items: flex-start;
}
.inline-block-item {
display: inline-block;
padding: 20px 0;
background-color: #e8ffe8;
}
</style>
</head>
<body>
<div class="flex-inline-block">
<span class="inline-block-item">转换为行内块的内联元素</span>
<span class="inline-block-item">另一个项目</span>
</div>
</body>
</html>运行后可以看到，转换为行内块后，垂直Padding正常撑开元素尺寸，同时不会像普通内联元素那样在普通文档流中忽略垂直Padding的尺寸影响，表现更加可控。