为何仅设置item4的padding却作用于item3？item3文本未居中求助

我给class为item4的元素设置了padding:1rem样式，但class为item3的元素看起来也有了内边距，同时item3里的文本没按预期居中。相关代码如下：

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="flexbox.css">
    <title>flexbox</title>
</head>
<body>
  <div class="container">
  <div class="container2">
    <p class="item1">item1</p>
    <p class="item2">item2</p>
  </div>  
  
  <div class="container2">
    <p class="item3">item3</p>
    <p class="item4">item4</p>
    
  </div>

</div>
</body>
</html>

CSS代码 #

.container{
    border: 1px solid black;
    background-color: rgb(255, 157, 0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline:1rem;
}

.container2{
    display: flex;
    gap: 2em;

}

.container2 p{
    background-color: blue;
    border: 1px solid black;
  
}

.item4{
    padding:1rem;
    
}

原因分析 #

• item3并非真的有内边距：父容器.container2是flex布局，默认align-items: stretch，会让所有子元素拉伸到和最高的子元素（这里是加了padding的item4）同高度，所以视觉上item3看起来和item4一样“有内边距”，实际只是被拉长了。
• item3文本未居中：没有给item3设置文本居中样式，加上被拉伸后的高度，文本默认左对齐，就显得没居中。

解决方法 #

1. 修正高度拉伸问题：给.container2添加align-items: center，让子元素在交叉轴居中，不再被强制拉伸，此时就能看到只有item4有padding。
2. 让item3文本居中：给.item3添加text-align: center实现水平居中；如果需要垂直居中，可以给item3加上display: flex; align-items: center;。

修改后的CSS代码：

.container{
    border: 1px solid black;
    background-color: rgb(255, 157, 0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline:1rem;
}

.container2{
    display: flex;
    gap: 2em;
    align-items: center; /* 新增：避免子元素被拉伸 */
}

.container2 p{
    background-color: blue;
    border: 1px solid black;
}

.item3{
    text-align: center; /* 新增：文本水平居中 */
    /* 可选：如果需要垂直居中，取消下面两行注释 */
    /* display: flex; */
    /* align-items: center; */
}

.item4{
    padding:1rem;
}

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