简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Pourquoi lorsque nous mettons deux divs avec les attributs display inline-block et box-sizing: border-box ensemble, une zone blanche apparaît lorsque les bordures sont différentes ?
P粉373596828
P粉373596828 2023-09-13 13:45:36
0
1
504

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粉373596828
P粉373596828

répondre à tous(1)
P粉803527801
P粉8035278012023-09-14 00:15:09 1 plancher

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>
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！