请考虑这段代码，为什么 d3 和 d4 没有对齐？ d4 顶部的空白是什么？
.myContainer {
display: block;
}
#d3 {
width: 150px;
height: 150px;
border: 5px solid #aef704;
padding: 25px;
background-color: blueviolet;
box-sizing: border-box;
display: inline-block;
}
#d4 {
width: 150px;
height: 150px;
border: 2px solid #aef704;
padding: 25px;
background-color: brown;
box-sizing: border-box;
display: inline-block;
}
<html lang="en">
<head>
</head>
<body>
<div class="myContainer">
<div id="d3">test content d3</div>
<div id="d4">test content d4</div>
</div>
</body>
</html>
这 2 个 div 都应该呈现内联块，并且应该具有 150px 宽度和 150px 高度，那么为什么第二个 div 比第一个要低一点。 这是呈现的内容：
因为内联的默认垂直对齐元素是基线。通过将其设置为类似 top 的值来轻松更改它。
.myContainer { display: block; } #d3 { width: 150px; height: 150px; border: 5px solid #aef704; padding: 25px; background-color: blueviolet; box-sizing: border-box; display: inline-block; } #d4 { width: 150px; height: 150px; border: 2px solid #aef704; padding: 25px; background-color: brown; box-sizing: border-box; display: inline-block; } #d3, #d4 { vertical-align: top; }