为什么inline-block的元素加上负边距，它和block的元素表现出不一样的行为？

去掉id为b的display:inline-block时有不同的表现，想不通为什么会这样，代码如下

#a {
    width: 200px;
    height: 100px;
    background: #f00;
}

#b {
    display: inline-block;
    width: 200px;
    height: 100px;
    margin-top: -131px;
    background: #0f0;
}

<body>
    <div id="a"></div>
    <div id="b"></div>
</body>

图片描述

阅读 2.6k

这是一个涉及到linebox的baseline的问题，如果不熟悉，推荐读一下以下的博客
1.（翻译）关于Vertical-Align你需要知道的事情
 2. 天镶的博客
 3. 我自己写的关于baseline的博客---有点乱^_^

block元素表现的行为就不解释了，下面主要解释inline-block元素加上负边距的表现

先上我自己的代码

    .father {
        margin: 100px auto;
        width: 300px;
        height: 300px;
        background: #00ff00;
        /*font-size: 50px;  待会会修改这里*/
    }
    .child {
        width: 100px;
        height: 100px;
        background: yellow;
        display: inline-block;
        margin-top: -100px;
    }

<div class="father">
    <div class="child"></div>x
</div>

Question：为什么黄色child不会整个都出去呢？

①这个linebox的元素有黄色child（inline-block元素）和内容为x的匿名文本框。
②inline-block如果没有内容，则其baseline为其marginbox的下边缘。
③普通文本框的baseline由font-zie和line-height决定。
④linebox的baseline为各元素中最低的一条baseline，在这里是内容为x的匿名文本框的baseline。

本来高度为100px的黄色child设置margin-top为-100px，应该跑出蓝色father才对，但是inline-block元素处于linebox中，需要对齐linebox的baseline，即匿名文本框的baseline，他就跑不出绿色father的手掌心了，所以实际上黄色child上升的高度不是100px。

我们可以试着将绿色father的font-size设置为50px（代码中的注释），这样会导致linebox中匿名文本框的baseline位置降低，从而黄色child也跟降低下来进行baseline对齐。

设置font-size后的效果图