使用inline-block并排布局的div添加子元素后布局错位如何解决？

该偏移现象是inline-block元素的默认垂直对齐规则导致的：

• inline-block元素的默认vertical-align属性值为baseline，即元素默认按照基线对齐
• 空的inline-block元素的基线为自身的底部边缘
• 包含文本内容的inline-block元素的基线为内部第一行文本的基线
  两种基线位置不一致，最终表现为包含内容的卡片向下偏移。

方案1：修改垂直对齐规则（改动最小） #

直接给.card类新增vertical-align属性，统一所有卡片的对齐规则即可，可选值为top/middle/bottom，一般选top即可匹配你要的顶部对齐需求：

.card {
    background-color: red;
    margin-left: 15px;
    width: 100px;
    height: 50px;
    display: inline-block;
    vertical-align: top; /* 新增该行代码 */
}

补充说明：使用inline-block实现并排时，HTML代码中元素之间的换行会产生额外的水平间隙，你可以通过给父容器设置font-size: 0，再给.card内部重置font-size的方式消除该间隙。

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

如果不需要兼容IE9及更早版本，更推荐给父容器使用Flex布局实现卡片并排，天然支持等高对齐，也不会出现inline-block的额外间隙问题：
首先给父容器添加自定义类名，例如card-wrapper，对应代码如下：

<div class="card-wrapper">
    <div class="card"></div>
    <div class="card">
        <div>Testing 123</div>
    </div>
    <div class="card"></div>
</div>

/* 父容器样式 */
.card-wrapper {
    display: flex;
    gap: 15px; /* 直接控制卡片之间的间距，不需要再给.card设置margin-left */
}
/* 卡片样式可以删除display和margin-left属性 */
.card {
    background-color: red;
    width: 100px;
    height: 50px;
}

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