• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

display: inline-block; automatischer Abstand?

Z

Zejo

Mitglied
Hallo,

ich bin grad am rätseln, warum es bei dem Befehl "display: inline-block" automatisch einen Abstand gibt.

Setzt man z.B. mehrere <p> untereinander, vergibt eine Hintergrundfarbe und setzt <p> als "display: inline-block", dann gibt es automatisch Abstände, selbst wenn man margin auf 0 setzt.

Woran liegt das?

HTML: 
<head>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}


p {
  display: inline-block;
  margin: 0;
  background-color: red;
  width: 100px;
  text-align: center;
}

</style>
</head>
<body>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</body>
 
Zejo schrieb:
Hallo,

ich bin grad am rätseln, warum es bei dem Befehl "display: inline-block" automatisch einen Abstand gibt.

Setzt man z.B. mehrere <p> untereinander, vergibt eine Hintergrundfarbe und setzt <p> als "display: inline-block", dann gibt es automatisch Abstände, selbst wenn man margin auf 0 setzt.

Woran liegt das?

HTML: 
<head>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}


p {
  display: inline-block;
  margin: 0;
  background-color: red;
  width: 100px;
  text-align: center;
}

</style>
</head>
<body>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</body>
Zum Vergrößern anklicken....

Wegen "display: inline-block" bzw. dem white space dazwischen ;)

Mögliche Lösung:
Den whitespace zwischen den Elementen entfernen, zB
HTML: 
<p>test</p><p>test</p><p>test</p>
oder
HTML: 
<p>test</p><!--
--><p>test</p><!--
--><p>test</p><!--
--><p>test</p>
 
Krass, ich dachte, die Schreibweise im html ist egal, ob ich jetzt inline elemente nebeneinander oder unterneinander setze.

Danke und Gruß
Zejo
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben