Wann verwendest du inline-block?

Der Wert inline-block für display ist ein Klassiker! Er ist nicht neu und die Browserunterstützung ist sicher nichts, worüber man sich Sorgen machen müsste. Ich bin sicher, viele von uns greifen intuitiv danach. Aber lassen Sie uns das mal auf den Punkt bringen. Wofür ist er eigentlich nützlich? Wann wählt man ihn gegenüber anderen, vielleicht ähnlichen, Optionen?

(Ich wette, das sorgt für interessante Antworten.)

Wofür hast du das letzte Mal `display: inline-block` verwendet?

— Chris Coyier (@chriscoyier) 19. Juni 2020

Schaltflächen (Buttons)

Die häufigste Antwort, die ich hörte, war: Ich verwende es immer für Buttons.

Letztendlich denke ich, das macht Sinn, aber es trägt zu einem meiner Meinung nach leichtem Missverständnis bei. Die Idee ist, dass Elemente, die wie Buttons aussehen (die vielleicht mit <a>, <button> oder vielleicht <input> erstellt wurden), inline angeordnet werden sollen – so wie sie es natürlich tun –, aber dennoch mit Abstand und Polsterung versehen werden können. Das ist der Teil mit dem leichten Missverständnis: Elemente mit display: inline; können *trotzdem* margin und padding haben, und es verhält sich wahrscheinlich so, wie man es erwartet.

Der knifflige Teil ist, dass

• Der block-gerichtete Außenabstand bei Inline-Elementen wird komplett ignoriert
• Die Polsterung bei Inline-Elementen beeinflusst nicht die Höhe der Textzeile

Während die Buttons selbst also ziemlich gut gestylt sind, ist das übergeordnete Element und der umgebende Text wahrscheinlich nicht so gut. Hier ist eine Demo, die

Die Dinge werden schlimmer, wenn sich bei Inline-Buttons Zeilenumbrüche ergeben

Also ja, inline-block macht bei Buttons durchaus Sinn, würde ich sagen. Aber…

Vergiss inline-flex und inline-grid nicht

Mit den display-Werten inline-flex und inline-grid erhalten Sie all das gute Verhalten, das Sie auch von inline-block erwarten, aber die Elemente (oft Buttons) können von einem stärkeren Inline-Layout-System profitieren.

Nehmen wir das Beispiel von Buttons mit Icons, wie diesem

<a href="#" class="button>
  <svg> ... </svg>
  Text
</a>

Um Text und Icon perfekt in der Mitte auszurichten, liegt es nahe, es so zu machen:

.button svg {
  vertical-align: middle;
}

Was es nie ganz richtig hinbekommt…

Aber das ist mit inline-flex leicht behoben

.button {
  display: inline-flex;
  align-items: center;
}

Mit inline-flex oder inline-grid haben Sie die volle Kraft eines Flexbox- oder Grid-Layout-Systems innerhalb eines Blocks, der sich in Inline-Richtung ausrichtet.

Blöcke, die sich immer noch umbrechen können

Ein inline-block Element beachtet eine width. Das ist ein weiterer Unterschied zu reinen inline Elementen. Früher bauten Leute ¹ Spaltenlayouts mit inline-block, weil es im Grunde das tun konnte, was Floats konnten, aber ohne die Notwendigkeit, das Float zu löschen², wodurch Leute Umbrüche nutzen konnten, die etwas eleganter als Floats funktionierten.

Die Idee von Inline-Blöcken, die sich wie Spalten verhalten und umbrechen können (bis hin zu einer Spalte), lebt bis heute fort, da dies ein Trick ist, der in HTML-E-Mails verwendet werden kann, um Mehrspaltenlayouts zu ermöglichen, die auf kleinen Bildschirmen zu einer einzelnen Spalte kollabieren, *ohne dass dafür Media Queries benötigt werden* (die einige E-Mail-Clients nicht unterstützen).

Gestern in einer HTML-E-Mail, auf divs, die Tabellen umbrechen, um responsive Spalten ohne Media Queries zu ermöglichen

— Dan Denney (@dandenney) 19. Juni 2020

Dans Beispiel.

transform auf einem Inline-Element

Inline-Elemente können keine transform-Eigenschaft erhalten. Wenn Sie also eine benötigen, muss es inline-block sein.

Spaltenkinder, die sich nicht mitten in sich selbst brechen

CSS-Spalten können für Absätze von Text verwendet werden, bei denen es Ihnen egal ist, ob ein bestimmter Absatz über Spalten hinweg umbricht. Manchmal werden CSS-Spalten jedoch für Blöcke verwendet, bei denen dies umständlich wäre. Sagen wir, die Blöcke haben eigene Hintergründe und Polsterungen. Die Umbrüche sind optisch ziemlich seltsam.

Das ist ein seltsamer Trick, den ich, um ehrlich zu sein, nicht zu 100% verstehe, aber wenn Sie display: inline-block; auf diese Boxen anwenden (und wahrscheinlich width: 100%;, um sicherzustellen, dass sie spaltenbreit bleiben), dann brechen sie nicht um und die Polsterung bleibt erhalten.

Schnelle Möglichkeit, eine Liste horizontal anzuordnen

Dies war eine weitere megabeliebte Antwort auf meinen ursprünglichen Tweet. Listenelemente stapeln Listenelemente vertikal, wie blockbasierte Elemente. Sie sind nicht wirklich Blöcke. Sie sind display: list-item;, was hier tatsächlich von Bedeutung ist, wie wir sehen werden. Der beliebte Anwendungsfall ist: „Wenn ich eine Liste horizontal anordnen möchte“.

Also hast du eine Liste…

<ul>
  <li>Three</li>
  <li>Little</li>
  <li>Piggies</li>
</ul>

Du willst sie stattdessen in einer Reihe anordnen, du kannst…

li {
  display: inline-block;
}

Und du hast es.

Ich habe mir VoiceOver kurz angehört und die inline-block Liste verkündet das Element immer noch als Liste, spricht aber die Aufzählungszeichen nicht aus, was Sinn macht, da sie nicht vorhanden sind. Das ist das Problem, wenn man das display der Listenelemente selbst von list-item weg ändert: Sie verlieren ihre, ähm, Listen-Element-Eigenart.

Eine Alternative wäre, das Eltern-Element zu einem Flexbox-Container zu machen…

ul {
  display: flex;
}

…was die Sache mit der horizontalen Reihe (Standard von Flexbox) erreicht, aber die Aufzählungszeichen beibehält, da Sie die Anzeige der Listenelemente selbst nicht ändern. Es liegt an Ihnen, diese manuell zu entfernen, wenn Sie möchten.

Zentrierte Listen

Wo wir gerade von Listen sprechen, Jeff Starr hat gerade über die Idee von Listen innerhalb zentriertem Text geschrieben, was ebenfalls umständlich sein kann. Die Umständlichkeit besteht darin, dass der Text innerhalb der Listenelemente zentriert werden kann, das Listenelement selbst aber immer noch die volle Breite einnimmt, was zu dieser Situation führt, in der die Aufzählungszeichen linksbündig bleiben.

Jeffs Lösung bestand darin, die gesamte Liste auf inline-block zu setzen. Das behält die Liste auf die natürliche Breite des Inhalts beschränkt, so dass die Aufzählungszeichen den linken Rand verlassen und mit dem zentrierten Inhalt wandern können. Solange sich davor und danach Blockelemente befinden, ist das eine gute Lösung.

Als Alternative, wenn das Ziel ist, die Breite der Liste auf die Breite des Inhalts zu reduzieren, könnte dies auch so erreicht werden, ohne dass die Liste aufhört, blockbasiert zu sein

ul {
  width: max-content;
  margin: 0 auto;
  text-align: left;
}

---