如何解决两个inline-block布局div上方的空白间隙问题？

使用inline-block实现两个div（紫色.box1、粉色.box2）并排时，粉色div顶部出现空白间隙，这是因为inline-block元素默认会与文本基线对齐，导致元素间产生基线相关的空白。以下是几种有效的解决方法：

方案1：设置vertical-align为top（最推荐） #

给两个inline-block元素添加vertical-align: top，直接改变对齐基准，消除顶部间隙：

.box1{
    background-color: violet;
    display: inline-block;
    width:50%;
    padding: 5px;
    box-sizing: border-box;
    font-family: 'Baloo Bhai 2', cursive;
    height:120vh;
    vertical-align: top; /* 添加垂直对齐规则 */
}

.box2{
    background-color: pink;
    display: inline-block;
    width:50%;
    padding: 5px;
    box-sizing: border-box;
    font-family: 'Baloo Bhai 2', cursive;
    height:120vh;
    vertical-align: top; /* 添加垂直对齐规则 */
}

方案2：移除HTML元素间的空白字符 #

如果HTML中两个div之间存在换行、空格等空白字符，会被解析为字符间隙（你的代码中已经连写div，此方案作为补充参考）：

<!-- 错误写法：存在换行空格 -->
<div class="box1"> man </div>
<div class="box2"> man2 </div>

<!-- 正确写法：连写或用注释消除空白 -->
<div class="box1"> man </div><div class="box2"> man2 </div>
<!-- 或 -->
<div class="box1"> man </div><!--
--><div class="box2"> man2 </div>

方案3：父元素设置font-size: 0 #

inline-block的间隙本质是字符间距，给父元素（main）设置font-size: 0，再给子元素恢复字体大小：

main {
    font-size: 0; /* 消除字符间隙 */
}

.box1, .box2 {
    font-size: 16px; /* 恢复子元素字体大小 */
}

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