inline-block元素布局偏移及marginTop塌陷疑问

Demo1：为何红色div与蓝色div不在同一水平线上？ #

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        body {
            margin: 0;
        }

        #div1 {
            display: inline-block;
            background-color: red;
            width: 50px;
            height: 50px;
        }
        #div2 {
            display: inline-block;
            background-color: blue;
            width: 50px;
            height: 50px;
        }

        #div2-child {
            width: 20px;
            height: 20px;
            background-color: yellow;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="div1">x</div>
    <div id="div2">
        <div id="div2-child"></div>
    </div>
</body>

原因：
inline-block元素默认垂直对齐方式为baseline（文本基线）。红色div内的文本“x”基线是文本底部，蓝色div内的子元素是无文本的inline-block，蓝色div的基线会落到自身底部（无行内文本作为基线参考）。两者基于基线对齐，导致蓝色整体偏下，和红色div不在同一水平线。

Demo2：基于Demo1移除div1内的文本“x”后，为何蓝色div下沉到底部？ #

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        body {
            margin: 0;
        }

        #div1 {
            display: inline-block;
            background-color: red;
            width: 50px;
            height: 50px;
        }
        #div2 {
            display: inline-block;
            background-color: blue;
            width: 50px;
            height: 50px;
        }

        #div2-child {
            width: 20px;
            height: 20px;
            background-color: yellow;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2">
        <div id="div2-child"></div>
    </div>
</body>

原因：
空的inline-block元素无流内容，浏览器将其基线视为元素顶部；蓝色div的基线是内部子元素的基线（子元素无文本，基线为自身底部，即蓝色div的底部）。两者基于基线对齐时，div1的顶部与蓝色div的底部对齐，最终呈现蓝色div下沉到底部的效果。

Demo3：给div1和div2-child添加文本“x”后，为何所有元素都在同一行？ #

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        body {
            margin: 0;
        }

        #div1 {
            display: inline-block;
            background-color: red;
            width: 50px;
            height: 50px;
        }
        #div2 {
            display: inline-block;
            background-color: blue;
            width: 50px;
            height: 50px;
        }

        #div2-child {
            width: 20px;
            height: 20px;
            background-color: yellow;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="div1">x</div>
    <div id="div2">
        <div id="div2-child">x</div>
    </div>
</body>

原因：
此时div1的基线是内部文本“x”的基线，div2-child的基线也是自身文本“x”的基线，蓝色div的基线则是内部最后一行文本（div2-child里的“x”）的基线。所有元素基线统一为文本“x”的基线，因此div1、div2基于该基线对齐，div2-child在蓝色div内部也对齐基线，最终所有元素处于同一水平线。

Demo4：仅给div2设置margin-top:100px，为何div1也会下移？如何让div1回到顶部？ #

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        body {
            margin: 0;
        }

        #div1 {
            display: inline-block;
            background-color: red;
            width: 50px;
            height: 50px;
        }
        #div2 {
            display: inline-block;
            background-color: blue;
            width: 50px;
            height: 50px;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>

原因： #

div1和div2属于同一行框内的inline-block元素，给div2设置margin-top:100px会向下推动整个行框的顶部，div1作为行框内的元素，会跟着行框一起下移，而非仅div2单独移动。

解决方法： #

有几种实用方案：

• 给div1添加样式vertical-align: top;，让它对齐到行框顶部，不受div2的margin-top影响；
• 将其中一个元素的display改为block，搭配float: left;或Flex布局排列，脱离行内流约束；
• 给父元素（body）设置overflow: hidden;或padding-top: 1px;，打破行框默认布局逻辑；
• 用相对定位代替margin-top：给div2设置position: relative; top: 100px;，仅移动div2自身，不影响行框和div1位置。

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