suchen

Heim  >  Fragen und Antworten  >  Hauptteil

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?

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粉373596828P粉373596828440 Tage vor572

Antworte allen(1)Ich werde antworten

  • P粉803527801

    P粉8035278012023-09-14 00:15:09

    因为内联的默认垂直对齐元素是基线。通过将其设置为类似 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>

    Antwort
    0
  • StornierenAntwort