Veuillez considérer ce code, pourquoi d3 et d4 ne sont-ils pas alignés ? Quel est l'espace en haut de 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>
Ces deux divs devraient restituer des blocs en ligne et devraient avoir une largeur de 150 px et une hauteur de 150 px, alors pourquoi le deuxième div est-il un peu inférieur au premier. Voici ce qui est rendu :
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Parce que l'élément en ligne aligné verticalement par défaut est la ligne de base. Modifiez-le facilement en le définissant sur une valeur telle que 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; }