如何消除inline-block绿色区块的额外空白与内容重叠问题

问题原因 #

你遇到的问题根源在于inline-block元素的默认基线对齐规则：

• inline-block元素默认使用vertical-align: baseline对齐，当两个同宽的inline-block元素内容行数差异较大时，基线对齐会导致视觉上的错位，使得内容较多的绿色区块向下偏移，出现重叠和额外空间占用。
• 虽然设置了width: 50%，但基线对齐的特性会让元素的布局受文本基线影响，而非单纯的容器边界对齐。

解决方案 #

方案1：修改vertical-align属性（最简单的修复） #

给.red和.green添加vertical-align: top，强制两个区块顶部对齐，彻底消除基线对齐带来的错位：

.red{
    background-color: red;
    width: 50%;
    height: 90vh;
    display: inline-block;
    white-space: normal;
    vertical-align: top; /* 添加这一行 */
}
.green {
    background-color: green;
    width: 50%;
    height: 90vh; 
    display: inline-block;
    vertical-align: top; /* 添加这一行 */
}

方案2：改用Flex布局（更现代的布局方式） #

将两个区块包裹在一个容器中，使用flex布局替代inline-block，天然避免对齐问题：

1. 给两个区块添加父容器：

<div class="container">
    <div class="red">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi itaque placeat natus voluptatum in autem eaque vero deserunt dolore eius?</div>
    <div class="green">Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus porro ducimus autem vel eveniet, numquam voluptatem laborum saepe vero nisi. ral Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum, quos! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem itaque quia ipsa voluptatem tempore quibusdam enim nihil totam quidem sunt provident, vero illo pariatur tempora perferendis minima eos maxime voluptatibus! Blanditiis facere nihil sed, repellendus expedita placeat est repellat deleniti at. Voluptates ad animi veniam commodi vel dolorum placeat molestiae.</div>
</div>

2. 添加容器样式：

.container {
    display: flex;
}
.red, .green {
    /* 移除display: inline-block; */
    flex: 1; /* 自动平分容器宽度，替代width:50% */
    height: 90vh;
}
.red {
    background-color: red;
}
.green {
    background-color: green;
}

这种方式无需处理对齐细节，是当前推荐的布局方案。

方案3：使用Float布局（传统兼容方案） #

给两个区块添加浮动属性，同时给footer清除浮动：

.red{
    background-color: red;
    width: 50%;
    height: 90vh;
    float: left; /* 替换display: inline-block */
}
.green {
    background-color: green;
    width: 50%;
    height: 90vh; 
    float: left; /* 替换display: inline-block */
}
footer{
    background-color: black;
    color: white;
    text-align: center;
    font-size: 20px;
    clear: both; /* 清除浮动，避免footer被覆盖 */
}

验证效果 #

修改后，绿色区块会完全在自己的50%宽度区域内显示，不再出现额外空白和与红色区块的重叠，两个区块会整齐并排。

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