css - 为什么inline-block的元素加上负边距，它和block的元素表现出不一样的行为？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

天蓬老师 2017-04-17 14:22:43

[HTML讨论组]

570

去掉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>
    <p id="a"></p>
    <p id="b"></p>
</body>

天蓬老师

欢迎选择我的课程，让我们一起见证您的进步~~

全部回复(2)

怪我咯2017-04-17 14:24:43 2楼

这是一个涉及到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;
    }

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

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后的效果图