设置align-items为flex-start/flex-end时，Div块与段落无法对齐求助

问题根源 #

浏览器给<p>标签默认加了上下外边距（margin），而<div>标签默认没有这一样式。当flex容器设置align-items: flex-end时，是按元素的完整外边距盒进行对齐计算的：p标签的底部margin会让它的内容区域（蓝色背景块）向上偏移，div标签无margin，内容区域（红色背景块）直接贴合容器底部，最终出现你描述的div“悬挂”、与p背景底部对齐的错位现象。

解决办法 #

方法1：清除p标签的默认外边距

直接移除p的默认上下margin，让它和div的布局盒模型保持一致：

.flexbox {
  display: flex;
  align-items: flex-end;
  background-color: yellow;
}
.flexbox p {
  background-color: blue;
  margin: 0; /* 清除默认的上下外边距 */
}
.flexbox div {
  background-color: red;
}

方法2：统一所有flex项的外边距

如果需要保留p标签的默认间距风格，给div设置与p一致的margin，确保两者布局盒对齐：

.flexbox {
  display: flex;
  align-items: flex-end;
  background-color: yellow;
}
.flexbox p, .flexbox div {
  margin: 1em 0; /* 统一上下边距，匹配p标签的默认值 */
}
.flexbox p {
  background-color: blue;
}
.flexbox div {
  background-color: red;
}

方法3：用CSS逻辑属性统一控制（适配现代浏览器）

使用margin-block逻辑属性，一次性统一设置所有flex项的块级方向外边距，规避浏览器默认样式差异：

.flexbox {
  display: flex;
  align-items: flex-end;
  background-color: yellow;
}
.flexbox p, .flexbox div {
  margin-block: 0; /* 清除块级方向的上下外边距 */
}
.flexbox p {
  background-color: blue;
}
.flexbox div {
  background-color: red;
}

效果验证 #

修改后，无论文本是否换行，p标签与div标签的内容区域都会精准贴合flex容器底部，不会再出现错位问题，完全适配你实际场景中div包含SVG链接的需求。

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