简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Warum erscheint ein weißer leerer Bereich, wenn wir zwei Divs mit den Attributen display inline-block und box-sizing: border-box zusammenfügen, wenn die Ränder unterschiedlich sind?
P粉373596828
P粉373596828 2023-09-13 13:45:36
0
1
503

Bitte beachten Sie diesen Code. Warum sind d3 und d4 nicht ausgerichtet? Was ist das Leerzeichen oben in 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>

Diese beiden Divs sollten Inline-Blöcke rendern und eine Breite von 150 Pixel und eine Höhe von 150 Pixel haben. Warum ist das zweite Div also etwas niedriger als das erste? Folgendes wird gerendert:

P粉373596828
P粉373596828

Antworte allen(1)
P粉803527801
P粉8035278012023-09-14 00:15:09 1 Etage

因为内联的默认垂直对齐元素是基线。通过将其设置为类似 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>
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！