为何flex-direction: column会使top、bottom属性失效？如何上移.par2？

我尝试调整段落间距，使其更靠近标题，但使用flex-direction: column时，top或bottom属性似乎失效了……请问该如何上移.par2？

当用flex-direction: column布局时，子元素默认是静态定位（static），top/bottom这类定位属性对静态元素不起作用，给你几个实用的调整方法：

• 用flex父容器的gap属性统一控间距：这是flex布局的标准做法，直接给父容器加gap: 10px（数值按需修改），就能缩小所有子元素间的距离，包括标题和.par2，简单高效。
• 给.par2加负margin单独微调：如果只想调整.par2的位置，写.par2 { margin-top: -15px; }就行，负数值越大，元素往上移得越多，适合精准调整单个元素。
• 结合父容器的justify-content：如果父容器有多余垂直空间，先设置justify-content: flex-start让子元素顶对齐，再通过子元素的margin调整间距，但这个方法不如前两种直接。

举个代码示例：

/* 方法1：父容器设置gap统一控制间距 */
.flex-parent {
  display: flex;
  flex-direction: column;
  gap: 8px; /* 调整此数值改变间距大小 */
}

/* 方法2：单独给.par2设置负margin实现上移 */
.par2 {
  margin-top: -12px; /* 负数值越大，上移幅度越大 */
}

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