这是我针对不同情况的代码。Demo1:为什么红框和蓝框不在同一水平面上?

<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>
Run Code Online (Sandbox Code Playgroud)
Demo2:在Demo1的基础上,我把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; …Run Code Online (Sandbox Code Playgroud)