请考虑这段代码，为什么 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 比第一个要低一点。 这是呈现的内容：
P粉8035278012023-09-14 00:15:09
因为内联的默认垂直对齐元素是基线。通过将其设置为类似 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;
}
<div class="myContainer"> <div id="d3">test content d3</div> <div id="d4">test content d4</div> </div>