Please consider this code, why are d3 and d4 not aligned? What is the whitespace at the top of 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>
Both these 2 divs should render inline blocks and should have 150px width and 150px height, so why is the second div a bit lower than the first one. This is what is rendered:
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Because the default vertical alignment of inline elements is the baseline. Easily change it by setting it to a value like 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; }