使用display:inline-block布局粉色盒子时顶部留白问题排查

我想把三个粉色盒子排列在同一行，给盒子设置display:inline-block后，顶部出现了留白。已经尝试过设置margin和padding为0、用单个div包裹、把h1/h2改成span等操作，用开发者工具排查也没找到对应问题，请问问题出在哪？

代码示例 #

HTML代码 #

<div class="hello">
  <h1>이건 첫째</h1>
</div>
<div class="hello">
  <h2>이건 둘째</h2>
  <input type="text">
</div>
<div class="helloCss">
  <h2>이건 셋째</h2>
  <ul>
    <li>Hello</li>
    <li>Css</li>
    <li>World!</li>
  </ul>
</div>
<div class="helloJava">
  <h2>이건 넷째</h2>
  <ol>
    <li>Hello</li>
    <li>Java</li>
    <li>World!</li>
  </ol>
</div>

SCSS代码 #

$g:rgb(115, 115, 115);

@mixin box($color:pink){
    color:$g;
    background-color:$color;
    width:200px;
    height:300px;
    border:2px solid $g;
}

.hello{
    display:inline-block;
    input{
        margin:{
            left:10px;
            top:10px;
        }
    }
    @include box();
    h1{
        background-color:rgb(238, 206, 219);
    }
    &Java{
        @include box();
        background-color:rgb(175, 202, 255);
    }
}

.helloCss{
    @extend .hello;
}

布局效果截图 #

问题原因及解决方案 #

问题根源 #

inline-block元素默认遵循基线对齐规则，你的每个盒子内部包含的元素（h1、input、列表）高度和布局不同，导致浏览器按照基线对齐时，盒子顶部出现偏移留白。另外浏览器默认给h1、h2、ul等元素设置了外边距，也可能加剧这个问题。

解决方法 #

1. 强制顶部对齐（最直接有效）
   给.hello类添加vertical-align: top;，覆盖默认的基线对齐：

.hello{
    display:inline-block;
    vertical-align: top; // 添加此行
    // 原有代码保持不变
}

2. 重置默认样式
   在SCSS开头添加全局重置代码，消除浏览器默认的margin和padding干扰：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

3. 改用Flex布局
   如果不需要兼容旧浏览器，可以把三个粉色盒子用一个父容器包裹，设置父容器为display:flex，盒子会自动顶部对齐且同行排列：

<!-- 新增父容器 -->
<div class="box-container">
  <div class="hello">...</div>
  <div class="hello">...</div>
  <div class="helloCss">...</div>
</div>

.box-container {
    display: flex;
}

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