為什麼當我們將兩個具有display inline-block和box-sizing: border-box屬性的div放在一起時，邊框不同的情況下會出現白色空白區域呢？
請考慮這段程式碼，為什麼 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 比第一個要低一點。 這是呈現的內容：
