Abstand zwischen zwei Div-Containern verhindern HTML?

Ich habe zwei Div-Container mit display: inline-block; padding: 0; margin: 0; aber es befindet sich trotzdem ein Abstand zwischen ihnen. Woran liegt das?

hoffe auf Hilfe,

Bohne47

Answer 1

[EinAlexander]

Schreib das in eine einzige Zeile. Nicht so

<div class="reddiv"></div>
<div class="bluediv"></div>

Sondern so

<div class="reddiv"></div><div class="bluediv"></div>

Alex

Comments

[Bohne47]

Ah, ich dachte das macht bei HTML keinen Unterschied. Aber scheibar ja doch.

[EinAlexander]

@Bohne47

Ah, ich dachte das macht bei HTML keinen Unterschied

Ein sog. white space wird eben als Leerzeichen dargestellt. Was sonst?

Answer 2

[bubbIes]

Flexbox bietet eine flexible und leistungsstarke möglichkeit, elemente in einer zeile oder spalte anzuordnen und eignet sich besonders gut für solche vorhaben

.container {
  display: flex;
}

.reddiv {
  flex: 1;
  height: 5em;
  background-color: red;
}

.bluediv {
  flex: 1;
  height: 5em;
  background-color: blue;
}

<div class="container">
<div class="reddiv"></div>
<div class="bluediv"></div>
</div>

inline-block elemente haben standardmäßig eine leerzeichenbreite zwischen sich, das bedeutet dass der browser einen kleinen abstand zwischen den beiden divs einfügt, um mögliche leerzeichen im HTML code zu berücksichtigen.