Abstand zwischen zwei Div-Containern verhindern HTML?

29.05.2023, 18:01 
HTML:
<div class="reddiv"></div>
<div class="bluediv"></div>

CSS:
.reddiv{display: inline-block; padding: 0; margin: 0; width:5em; height:5em; background-color: red;}
.bluediv{display: inline-block; padding: 0; margin: 0; width:5em; height:5em; background-color: blue;}

2 Antworten

EinAlexander
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, Webseite, CSS
29.05.2023, 18:32

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
Bohne47 
Beitragsersteller
 29.05.2023, 18:34

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

EinAlexander  29.05.2023, 18:36
@Bohne47
Ah, ich dachte das macht bei HTML keinen Unterschied

Ein sog. white space wird eben als Leerzeichen dargestellt. Was sonst?
bubbIes
29.05.2023, 18:30

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.