HTML/CSS：文本过长时相邻inline-block父容器异常下移如何解决

• inline-block 元素默认垂直对齐规则为 vertical-align: baseline，会以元素内部文本的基线作为对齐基准。你使用 position: relative 向上偏移p标签仅改变了文本的视觉位置，p元素本身的高度仍然占据li内部的文档流空间，当文本变为两行后p高度增加，li的基线也随之下降，相邻的li就会对齐这个更低的基线出现下沉。
• p标签自带默认上下外边距，你没有清除这部分边距，进一步放大了li内部被撑开的高度差。

快速修复（不改动原有结构） #

只需要在原有CSS基础上新增两行配置即可解决错位问题：

.backgroundclr li {
  /* 原有属性保持不变 */
  vertical-align: top; /* 让所有li统一靠顶部对齐，不受基线变化影响 */
}
.backgroundclr li p {
  /* 原有属性保持不变 */
  margin: 0; /* 清除p标签默认外边距 */
}

更灵活的优化方案（推荐） #

原有相对定位偏移的方式需要写死偏移量，适配性差，建议改用flex布局实现，不需要手动计算偏移，自动适配任意行数的文本：

修改后的CSS代码 #

.backgroundclr {
  list-style: none;
  margin-top: 70px;
  display: flex;
  gap: 0; /* 可自行调整色块之间的间距 */
}
.backgroundclr li {
  border: 1px solid black;
  width: 302px; /* 保持原有总宽度 200px + 左右padding各50px + 左右边框各1px */
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}
/* 色块区域单独定义 */
.color-block {
  width: 100%;
  height: 100px;
}
.bclr1 .color-block {
  background-color: rgb(48, 56, 65);
}
.bclr2 .color-block {
  background-color: rgb(114, 120, 126);
}
.bclr3 .color-block {
  background-color: rgb(255, 255, 255);
}
.backgroundclr li p {
  font-size: 20px;
  margin: 0 0 10px 0; /* 仅保留文本和色块之间的底部间距 */
}

修改后的HTML代码 #

<ul class="backgroundclr">
  <li class="bclr1">
    <div class="color-block"></div>
    <p>Dark Gray<br>rgb(48, 56, 65)</p>
  </li>
  <li class="bclr2">
    <div class="color-block"></div>
    <p>Medium Gray<br>rgb(114, 120, 126)</p>
  </li>
  <li class="bclr3">
    <div class="color-block"></div>
    <p>White<br>rgb(255, 255, 255)</p>
  </li>
</ul>

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