Kampf gegen den Leerraum zwischen Inline-Block Elementen

Ich habe das in letzter Zeit ein paar Mal auf Twitter gesehen und dann ein interessantes Dabblet, also dachte ich, es wäre wichtig, das zu dokumentieren.

Hier ist das Ding: Eine Reihe von inline-block Elementen, die so formatiert sind, wie Sie normalerweise HTML formatieren, haben Leerzeichen zwischen sich.

Mit anderen Worten

<nav>
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</nav>

nav a {
  display: inline-block;
  padding: 5px;
  background: red;
}

Wird resultieren in

Wir wollen oft, dass die Elemente aneinander stoßen. Im Falle von Navigation bedeutet das, dass es die unangenehmen kleinen, nicht klickbaren Lücken vermeidet.

Das ist kein „Bug“ (glaube ich nicht). Es ist einfach die Art und Weise, wie Elemente auf einer Zeile gesetzt werden. Sie wollen Leerzeichen zwischen Wörtern, die Sie tippen, richtig? Die Leerzeichen zwischen diesen Blöcken sind genau wie Leerzeichen zwischen Wörtern. Das soll nicht heißen, dass die Spezifikation nicht aktualisiert werden könnte, um zu besagen, dass Leerzeichen zwischen Inline-Block-Elementen nichts sein sollten, aber ich bin mir ziemlich sicher, dass dies eine riesige Büchse der Pandora ist, die wahrscheinlich nie geöffnet wird.

Hier sind einige Möglichkeiten, den Spalt zu bekämpfen und Inline-Block-Elemente direkt nebeneinander zu platzieren.

Entfernen Sie die Leerzeichen

Der Grund, warum Sie die Leerzeichen bekommen, ist, dass Sie Leerzeichen zwischen den Elementen haben (ein Zeilenumbruch und ein paar Tabs zählen als Leerzeichen, nur um das klarzustellen). Minimierter HTML löst dieses Problem, oder einer dieser Tricks

<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

oder

<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>

oder mit Kommentaren…

<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>

Sie sind alle ziemlich seltsam, aber es tut seinen Zweck.

Negativer Rand

Sie können die Elemente mit einem negativen Rand von 4 Pixeln zurückschieben (muss möglicherweise je nach Schriftgröße des Elternelements angepasst werden). Anscheinend ist dies in älteren IE-Versionen (6 & 7) problematisch, aber wenn Sie sich nicht um diese Browser kümmern, können Sie zumindest die Codeformatierung sauber halten.

nav a {
  display: inline-block;
  margin-right: -4px;
}

Lassen Sie den schließenden Tag weg

HTML5 kümmert sich sowieso nicht darum. Obwohl Sie zugeben müssen, es fühlt sich seltsam an.

<ul>
  <li>one
  <li>two
  <li>three
</ul>

Setzen Sie die Schriftgröße auf Null

Ein Leerzeichen mit font-size: 0 ist... null Pixel breit.

nav {
  font-size: 0;
}
nav a {
  font-size: 16px;
}

Schweben Sie sie stattdessen einfach

Vielleicht müssen sie gar nicht inline-block sein, vielleicht können sie einfach auf die eine oder andere Weise geschwebt werden. Das erlaubt Ihnen, ihre Breite und Höhe und Polsterung und Zeug zu setzen. Sie können sie nur nicht zentrieren, wie Sie es können, indem Sie text-align: center; den Elternteil von inline-block Elementen. Nun... Sie können es irgendwie, aber es ist seltsam.

Verwenden Sie stattdessen einfach Flexbox

Wenn die Browserunterstützung für Sie akzeptabel ist und Sie Inline-Block für die Zentrierung benötigen, könnten Sie Flexbox verwenden. Sie sind nicht gerade austauschbare Layoutmodelle oder so etwas, aber Sie können das bekommen, was Sie davon brauchen.

Siehe

Beispiel auf CodePen