添加文本导致inline-block并列容器意外下沉问题咨询

这个问题是inline-block元素的默认对齐规则导致的：

• 所有display: inline-block的元素，默认vertical-align属性值为baseline，即按基线对齐。
• 当inline-block元素内部存在内联内容（比如你代码里的p标签文本）时，该元素的基线默认取内部最后一行文本的基线位置；如果元素内部没有内联内容，基线则取容器的底部边缘。
• 你左侧容器内的p标签设置了25px的大字号，基线位置比右侧容器默认字号的p标签基线位置更低，两个容器按基线对齐时，右侧容器就会向下偏移来匹配左侧的基线。删除p标签后两个容器都无有效内联内容，基线都取容器底部，所以自然对齐。

以下是几个常用的可行方案，可按需选择：

方案1：修改对齐规则（最快适配现有代码） #

直接给container-left、container-right都添加vertical-align: top属性，强制两个容器沿顶部对齐，无需改动其他现有逻辑：

.container-left, .container-right {
  vertical-align: top;
}

方案2：改用Flex布局（更适配你的百分比宽度需求） #

你原本需要的是75%、25%的自适应并列布局，用Flex布局更稳定，不会出现对齐问题，也能自适应不同屏幕宽度，修改如下：
首先给两个容器套一个父容器（也可以直接用body作为父容器），添加Flex属性：

.page-wrapper {
  display: flex;
  justify-content: space-between;
  padding: 150px 100px 0; /* 替代你原来写在左右容器上的margin */
  gap: 0; /* 无缝排布可设置为0 */
}

然后修改左右容器样式，去掉inline-block、无关margin属性，宽度改成你需要的百分比：

.container-left {
  width: 75%; 
  height: 550px;
  background: #E5F2FD; 
  text-align: center;
}
.container-right {
  width: 25%; 
  height: 550px; 
  background: #E5F2FD;
  text-align: center;   
}

方案3：修改inline-block元素的基线判定 #

给两个容器添加overflow: hidden，此时inline-block元素的基线会改为容器的底部边缘，也能实现对齐：

.container-left, .container-right {
  overflow: hidden;
}

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