同一CSS样式下网页行高不一致问题求助

你遇到的行高不一致问题，核心原因有两个：

1. 块级元素垂直margin折叠：.instruction是display:flex的块级元素，相邻块级元素的垂直margin会自动合并（取上下margin的最大值），原本设置的margin:0.2em 0，相邻元素间实际间距只有0.2em，而非预期的0.4em，部分行因内容高度差异，视觉上会显得间距“减半”。
2. 无效的垂直对齐属性：vertical-align:middle对flex容器完全不起作用，flex布局的垂直对齐需通过align-items控制，该属性缺失会导致内部元素垂直位置偏移，间接影响行高的视觉一致性。

修复方案： #

方案1：用gap替代margin（推荐）

将所有.instruction元素包裹在父容器中，通过flex列布局+gap控制行间距，彻底规避margin折叠问题：

/* 新增父容器样式 */
.instruction-container {
  display: flex;
  flex-direction: column;
  gap: 0.4em; /* 设置你需要的行间距 */
}

/* 修改.instruction样式 */
.instruction {
  max-width: 48ch;
  display: flex;
  flex-direction: row;
  margin: 0; /* 移除上下margin */
  align-items: center; /* 替换vertical-align，实现内部元素垂直居中 */
}

方案2：调整margin避免折叠

若不想新增父容器，可给.instruction仅设置单方向margin，同时修正垂直对齐属性：

.instruction {
  max-width: 48ch;
  display: flex;
  flex-direction: row;
  margin: 0 0 0.4em 0; /* 仅保留底部margin */
  align-items: center; /* 实现内部元素垂直居中 */
}

另外，检查.instruction内部子元素是否存在额外的margin或padding，这也可能导致整体行高不一致，需确保子元素的内外边距统一。

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