mark: horizontaler Außenabstand von inline-block Elementen

Beitrag lesen

SELF-Forum

horizontaler Außenabstand von inline-block Elementen

mark
– Informationen zu den Bewertungsregeln

hi,

Warum?

Weil du display: inline-block setzt. Und weil da line-breaks und Leerstellen zwischen deinen inline1, inline2 sind. Es geht also bei den Lösungsansätzen darum diese Leerstellen und Linebreaks weg zu bekommen.

Den genauen Grund, WARUM Browser das so rendern und den Abstand nicht einfach wegmachen kenne ich leider auch nicht.

Lösungsansätze:

  • font-size des Elternelementes auf 0 des setzen und innerhalb der Kind-Elemente (inline1, inline2) wiederherstellen.

In deinem Fall ist das Elternelemnet <body>, weshalb du gut daran tust um inline1, inline2 einen Wrapper zu setzen, da du sonst allen Elemente im body font-size 0 zuweist.

  • negative margins verwenden. margin-right: -4px. Davon ist eher abzuraten, aber es funktioniert.

  • word-spacing der Elemente inline1, inline2 auf 0, oder -1 setzen. Kann mich jetzt nicht mehr genau erinnern, ob das jetzt 0, oder -1 war ...

  • die Leerstellen und Zeilenumbrüche zwischen den Elementen inline1, inline2 entfernen.

so:

<div id="inline1">Inline 1</div><div id="inline2">Inline 2</div>

oder so:

<div id="inline1">Inline 1</div><!--
--><div id="inline2">Inline 2</div>

oder ...

Sicher gibt es auch noch andere Möglichkeiten. Ich persönlich verwende die Lösung mit "font-size:0", oder ich entferne die Leerstellen mit Kommentaren. Solltest du vor haben irgendwo letter-spacing zu verwenden, so musst du auch das auf 0 setzen.

lg mark

Beitrag melden
–
Informationen zu den Bewertungsregeln