Abstand

The CSS Podcast – 013: Abstände

Angenommen, Sie haben drei übereinander gestapelte Kisten und zwischen ihnen soll Platz sein. Wie viele Möglichkeiten gibt es, dies in CSS zu tun?

Mit der Eigenschaft margin erhalten Sie möglicherweise die gewünschten Informationen, können aber auch zusätzliche Abstände hinzufügen, die Sie nicht benötigen. Beispiel: Wie können Sie das Targeting nur auf den Raum zwischen den einzelnen Elementen festlegen? In diesem Fall ist gap möglicherweise besser geeignet. Es gibt viele Möglichkeiten, den Abstand innerhalb einer UI anzupassen. Jede hat ihre eigenen Stärken und Einschränkungen.

HTML-Abstand

HTML selbst bietet einige Methoden, um Elemente zu platzieren. Mit den Elementen <br> und <hr> können Sie Elemente in Blockrichtung anordnen. Wenn Sie sich in einer lateinischen Sprache befinden, ist dies von oben nach unten.

Wenn Sie ein <br>-Element verwenden, wird wie bei Drücken der Eingabetaste in einem Textverarbeitungsprogramm ein Zeilenumbruch erstellt.

Mit <hr> wird eine horizontale Linie mit Abstand auf beiden Seiten erstellt, die auch margin genannt wird.

Neben der Verwendung von HTML-Elementen können HTML-Entitäten Platz schaffen. Eine HTML-Entität ist eine reservierte Zeichenfolge, die vom Browser durch Zeichenentitäten ersetzt wird. Wenn Sie beispielsweise © in Ihre HTML-Datei eingeben, wird sie in ein ©-Zeichen konvertiert. Die Entität   wird in ein geschütztes Leerzeichen konvertiert, das ein Inline-Leerzeichen bietet. Seien Sie jedoch vorsichtig, denn durch den unverzerrten Aspekt dieses Zeichens werden die beiden Elemente zusammengefügt, was zu ungewöhnlichem Verhalten führen kann.

Gewinnspanne

Wenn Sie auf der Außenseite eines Elements Platz schaffen möchten, verwenden Sie das Attribut margin. Der Rand ist wie das Hinzufügen eines Kissen um Ihr Element. Das Attribut margin ist eine Kurzschreibweise für margin-top, margin-right, margin-bottom und margin-left.

Das Kürzel margin wendet Attribute in einer bestimmten Reihenfolge an: oben, rechts, unten und links. Das fällt dir schwer: TRouBLe.

Das Kürzel margin kann auch mit einem, zwei oder drei Werten verwendet werden. Wenn Sie einen vierten Wert hinzufügen, können Sie jede einzelne Seite angeben. Diese werden wie folgt angewendet:

• Ein Wert wird auf alle Seiten angewendet. (margin: 20px).
• Zwei Werte: Der erste Wert wird auf die obere und die untere Seite und der zweite auf die linke und die rechte Seite angewendet. (margin: 20px 40px)
• Drei Werte: Der erste Wert ist top, der zweite Wert left und right und der dritte Wert ist bottom. (margin: 20px 40px 30px).

Die Marge kann mit einer Länge, einem Prozentsatz oder einem automatischen Wert wie 1em oder 20% definiert werden. Bei Verwendung eines Prozentsatzes wird der Wert anhand der Breite des enthaltenen Blocks des Elements berechnet.

Wenn also der enthaltene Block des Elements eine Breite von 250px und das Element einen margin-Wert von 20% hat, hat jede Seite des Elements eine berechnete Marge von 50px.

Sie können auch einen Wert von auto für die Marge verwenden. Bei Elementen auf Blockebene mit einer eingeschränkten Größe belegt ein Rand von auto den verfügbaren Platz in der Richtung, auf die er angewendet wird. Ein gutes Beispiel hierfür ist dieses Flexbox-Modul, bei dem die Elemente voneinander weggeschoben werden.

Ein weiteres gutes Beispiel für einen auto-Rand ist ein horizontal zentrierter Wrapper mit einer maximalen Breite. Diese Art von Wrapper wird häufig verwendet, um eine konsistente mittlere Spalte auf einer Website zu erstellen.

.wrapper {
    max-width: 400px;
    margin: 0 auto;
}

Hier wird der Rand von der oberen und der unteren Seite (Block) entfernt und auto teilt den Abstand zwischen der linken und rechten (Inline) Seite.

Negativer Rand

Für die Marge können auch negative Werte angegeben werden. Statt einen Raum zwischen benachbarten gleichgeordneten Elementen hinzuzufügen, wird der Abstand zwischen ihnen reduziert. Dies kann zu überlappenden Elementen führen, wenn Sie einen negativen Wert angeben, der größer als der verfügbare Platz ist.

Rand minimieren

Die Minimierung der Gewinnspanne ist ein schwieriges Konzept, aber es ist etwas, auf das Sie beim Erstellen von Schnittstellen stoßen werden. Angenommen, Sie haben zwei Elemente, eine Überschrift und einen Absatz, die beide einen vertikalen Rand haben:

<article>
  <h1>My heading with teal margin</h1>
  <p>A paragraph of text that has blue margin on it, following the heading with margin.</p>
</article>

h1 {
    margin-bottom: 2rem;
}

p {
    margin-top: 3rem;
}

Auf den ersten Blick wäre es irreführend, zu denken, dass der Absatz 5em von der Überschrift entfernt ist, weil 2rem und 3rem zusammen zu 5rem berechnet werden. Da der vertikale Rand minimiert wird, beträgt der Abstand tatsächlich 3rem.

Beim Minimieren des Rands wird der größte Wert von zwei benachbarten Elementen ausgewählt, deren vertikaler Rand an den angrenzenden Seiten festgelegt ist. Der untere Rand von h1 trifft mit dem oberen Rand von p, sodass der größte Wert des unteren Rands von h1 und des oberen Rands von p ausgewählt wird. Wenn h1 den unteren Rand von 3.5rem haben müsste, wäre der Abstand zwischen den beiden dann 3.5rem, da dieser Wert größer als 3rem ist. Nur Blockränder werden minimiert, keine horizontalen Ränder.

Die Randminimierung ist auch bei leeren Elementen hilfreich. Wenn der obere und untere Rand eines Absatzes 20px beträgt, entsteht nur ein Abstand von 20px und nicht 40px. Wenn innerhalb dieses Elements jedoch irgendetwas hinzugefügt wird, einschließlich padding, wird sein Rand nicht mehr automatisch minimiert und wie jedes Feld mit Inhalt behandelt.

Überprüfen Sie Ihr Wissen

Testen Sie Ihr Wissen über das Minimieren von Rändern

Minimieren des Rands verhindern

Wenn Sie ein Element mit position: absolute absolut positionieren, wird der Rand nicht mehr minimiert. Der Rand wird auch nicht minimiert, wenn Sie auch die Eigenschaft float verwenden.

Wenn Sie ein Element ohne Rand zwischen zwei Elementen mit Blockrand haben, wird der Rand ebenfalls nicht minimiert, da die beiden Elemente mit Blockrand keine benachbarten gleichgeordneten Elemente mehr sind, sondern nur gleichgeordnete Elemente.

In der Layoutlektion haben Sie erfahren, dass Flexbox- und Rastercontainer Blockcontainern sehr ähnlich sind, ihre untergeordneten Elemente jedoch sehr unterschiedlich handhaben. Dies gilt auch für das Minimieren der Ränder.

Wenn wir das ursprüngliche Beispiel aus der Lektion nehmen und die Flexbox mit Spaltenrichtung anwenden, werden die Ränder kombiniert und nicht minimiert. Dies kann die Vorhersehbarkeit der Layoutarbeit ermöglichen, für die Flexbox- und Rastercontainer konzipiert sind.

Die Marge und die Randminimierung können schwierig zu verstehen sein. Es ist jedoch sehr nützlich, ihre Funktionsweise im Detail zu verstehen. Daher wird diese ausführliche Erläuterung dringend empfohlen.

Abstand

Anstelle eines Freiraums auf der Außenseite der Verpackung, wie bei margin, schafft die Eigenschaft padding einen Platz auf der Innenseite der Verpackung – ähnlich wie bei der Isolierung.

Abhängig davon, welches Boxmodell Sie verwenden – wie in der Lektion zum Kastenmodell besprochen, kann sich padding auch auf die Gesamtabmessungen des Elements auswirken.

Die Property padding ist eine Kurzschreibweise für padding-top, padding-right, padding-bottom und padding-left. Genau wie margin hat auch padding logische Attribute: padding-block-start, padding-inline-end, padding-block-end und padding-inline-start.

Positioning

Wird ebenfalls im Modul layout behandelt: Wenn Sie für position einen anderen Wert als static festlegen, können Sie Elemente mit den Eigenschaften top, right, bottom und left platzieren. Es gibt einige Unterschiede im Verhalten dieser Richtungswerte:

• Ein Element mit position: relative behält seine Position im Dokumentfluss, auch wenn Sie diese Werte festlegen. Auch sie sind relativ zur Position des Elements.
• Ein Element mit position: absolute basiert die Richtungswerte auf der relativen Position des übergeordneten Elements.
• Ein Element mit position: fixed basiert die Richtungswerte auf dem Darstellungsbereich.
• Ein Element mit position: sticky wendet die Richtungswerte nur an, wenn es angedockt bzw. hängen geblieben ist.

Im Modul Logische Attribute erfahren Sie mehr über die Attribute inset-block und inset-inline, mit denen Sie Richtungswerte festlegen können, die den Schreibmodus berücksichtigen.

Beide Attribute sind Kurzschreibweisen, die die Werte start und end kombinieren. Daher akzeptieren sie entweder einen Wert, der für start und end festgelegt werden soll, oder zwei einzelne Werte.

Raster und Flexbox

Sowohl in der Raster- als auch in der Flexbox können Sie mit der Eigenschaft gap den Abstand zwischen untergeordneten Elementen schaffen. Das Attribut gap ist eine Kurzschreibweise für row-gap und column-gap. Sie akzeptiert einen oder zwei Werte, bei denen es sich um Längen oder Prozentsätze handeln kann. Sie können auch Keywords wie unset, initial und inherit verwenden. Wenn Sie nur einen Wert definieren, wird derselbe gap-Wert sowohl auf die Zeilen als auch auf die Spalten angewendet. Wenn Sie jedoch beide Werte definieren, ist der erste Wert row-gap und der zweite Wert column-gap.

Mit Flexbox und Raster können Sie auch mithilfe ihrer Verteilungs- und Ausrichtungsfunktionen Platz schaffen, die im Rastermodul und Flexbox-Modul behandelt werden.

Einheitliche Abstände schaffen

Es ist eine gute Idee, eine Strategie zu wählen und diese beizubehalten, um eine einheitliche Benutzeroberfläche mit einem guten Ablauf und Rhythmus zu erstellen. Dies erreichen Sie, indem Sie einheitliche Maße für die Abstände verwenden.

Sie können beispielsweise 20px als konsistentes Maß für alle Lücken zwischen Elementen (sogenannte Spaltenabstände) verwenden, damit alle Layouts einheitlich aussehen. Sie können auch 1em als vertikalen Abstand zwischen Ablaufinhalten verwenden. Dadurch würde ein einheitlicher Abstand basierend auf dem font-size des Elements erzielt. In beiden Fällen sollten Sie diese Werte als Variablen (oder benutzerdefinierte CSS-Eigenschaften) speichern, um diese Werte zu tokenisieren und die Konsistenz zu vereinfachen.

:root {
  --gutter: 20px;
  --spacing: 1em;
}

h1 {
  margin-left: var(--gutter);
  margin-top: var(--spacing);
}

Mit benutzerdefinierten Eigenschaften wie dieser können Sie sie einmal definieren und dann im gesamten CSS verwenden. Wenn sie entweder lokal innerhalb eines Elements oder global aktualisiert werden, werden die Werte über die Kaskade weitergegeben und die aktualisierten Werte werden widergespiegelt.

Überprüfen Sie Ihr Wissen

Testen Sie Ihr Wissen über Leerzeichen