Maison > Questions et réponses > le corps du texte
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 :
P粉8035278012023-09-14 00:15:09
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; }
<div class="myContainer"> <div id="d3">test content d3</div> <div id="d4">test content d4</div> </div>