css - 为什么inline-block 的margin-top会互相影响？

问题描述

问 题

两个inline-block元素包裹在一个div里面，调整其中一个inline-block的margin-top，另一个元素也会跟着向下移动。代码如下：

<div id="outer">
    <div id="inner1"></div>
    <div id="inner2"></div>
</div>

#outer {
    width: 200px;
    height: 50px;
    background: pink;
}
#inner1 {
    display: inline-block;
    width: 50px;
    height: 20px;
    background: red;
}
#inner2 {
    display: inline-block;
    width: 50px;
    height: 20px;
    background: yellow;
    margin-top: 20px;
}

效果如图所示：

为什么在一个inline-block上设定margin-top，会影响另一个inline-block呢？

解决方案

默认情况inline（inline-block）元素垂直方向是基线对齐

vertical-align: baseline;

#inner2的margin撑开了inline-block元素的包含块，行框被撑开。(这个你可以把#outer的高设成auto来观察)
然后调节#inner1的vertical-align观察影响的因素

这篇关于css - 为什么inline-block 的margin-top会互相影响？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！