Abstand

The CSS Podcast – 013: Abstände

Angenommen, Sie haben eine Sammlung von drei Kartons. übereinander gestapelt sind und der Abstand zwischen ihnen benötigt. Wie viele Möglichkeiten fallen Ihnen dazu in CSS ein?

Das Attribut margin liefert Ihnen möglicherweise das, was Sie brauchen. aber es kann auch zusätzliche Abstände einfügen, die Sie nicht wünschen. Wie gehen Sie beispielsweise nur auf den Abstand zwischen den einzelnen Elementen vor? In diesem Fall ist ein Wert wie gap möglicherweise besser geeignet. Es gibt viele Möglichkeiten, Abstände innerhalb einer Benutzeroberfläche anzupassen. jede hat ihre eigenen Stärken und Vorbehalte.

HTML-Abstand

HTML selbst bietet einige Methoden zum Abstand zwischen Elementen. Mit den Elementen <br> und <hr> können Sie den Abstand zwischen Elementen in Blockrichtung festlegen. in einer lateinamerikanischen Sprache, von oben nach unten ist.

Wenn du ein <br>-Element verwendest, wird ein Zeilenumbruch erstellt, genau so, als würden Sie die Eingabetaste in einem Textverarbeitungsprogramm drücken.

Mit <hr> wird eine horizontale Linie mit einem Abstand auf beiden Seiten erstellt. Diese wird als margin bezeichnet.

Neben der Verwendung von HTML-Elementen Mit HTML-Entitäten können Sie Gruppenbereiche schaffen. Eine HTML-Entität ist eine reservierte Zeichenfolge, die vom Browser durch Zeichenentitäten ersetzt wird. Beispiel: Wenn Sie © in Ihre HTML-Datei eingeben, wird er in das Zeichen © umgewandelt. Die Entität   wird in ein geschütztes Leerzeichen konvertiert. mit einem Inline-Leerzeichen. Aber Vorsicht: da die beiden Elemente aneinandergefügt werden. was zu seltsamem Verhalten führen kann.

Gewinnspanne

Wenn Sie ein Element außen mit Raum lassen möchten, verwenden Sie das Attribut margin. Der Rand ist wie das Hinzufügen eines Kissens um ein Element. Die Eigenschaft margin ist eine Abkürzung für margin-top, margin-right, margin-bottom und margin-left.

Die Abkürzung margin wendet Attribute in einer bestimmten Reihenfolge an: oben, rechts, unten und links. Du erinnerst dich an die folgenden, die dir schwer fallen: TRouBLe.

Die Kurzschreibweise 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 oben und unten angewendet, Der zweite Wert wird auf die linke und rechte Seite angewendet. (margin: 20px 40px)
• Drei Werte: Der erste Wert ist top, ist der zweite Wert left und right, und der dritte Wert bottom ist. (margin: 20px 40px 30px)

Die Marge kann mit einer Länge, Prozentsatz oder automatischer Wert, z. B. 1em oder 20%. Wenn Sie einen Prozentsatz verwenden, wird der Wert basierend auf der Breite des Blocks, in dem das Element enthalten ist, berechnet.

Wenn der Block, in dem Ihr Element enthalten ist, also eine Breite von 250px hat, Ihr Element hat den margin-Wert 20%: hat jede Seite Ihres Elements eine berechnete Marge von 50px.

Sie können auch den Wert auto für die Marge verwenden. Für Elemente auf Blockebene mit eingeschränkter Größe ein auto-Rand belegt den verfügbaren Platz in der Richtung, auf die er angewendet wird. Hier ist ein gutes Beispiel: aus dem Flexbox-Modul, wo die Elemente auseinander geschoben 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 einheitliche mittlere Spalte auf einer Website zu erstellen.

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

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

Negativer Rand

Negative Werte können auch für die Marge verwendet werden. Anstatt zwischen benachbarten gleichgeordneten Elementen Platz zu schaffen, verringert sich der Abstand zwischen ihnen. Dies kann dazu führen, dass sich Elemente überlappen, wenn Sie einen negativen Wert deklarieren, der größer als der verfügbare Platz ist.

Rand minimieren

Die Randminimierung ist ein kompliziertes Konzept. aber das ist bei der Erstellung von Schnittstellen sehr häufig der Fall. 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 Es wäre toll, wenn Sie denken, dass der Absatz 5em von der Überschrift entfernt ist, weil 2rem und 3rem zusammen als 5rem berechnet werden. Da der vertikale Rand minimiert wird, beträgt der Abstand in Wirklichkeit 3rem.

Bei der Randminimierung wird der größte Wert zweier nebeneinanderliegender Elemente ausgewählt. wobei der vertikale Rand auf den angrenzenden Seiten festgelegt ist. Der untere Bereich von h1 trifft auf den oberen Bereich von p, Daher wird der größte Wert des unteren Rands von h1 und des oberen Rands von p ausgewählt. Wenn die h1 3.5rem des unteren Rands hätte, der Abstand dazwischen wäre dann 3.5rem, da dieser Wert größer als 3rem ist. Nur Blockränder werden minimiert, keine horizontalen Inline-Ränder.

Die Randminimierung ist auch bei leeren Elementen hilfreich. Wenn der obere und untere Rand eines Absatzes 20px beträgt, Es werden nur 20px des Speicherplatzes erstellt, nicht 40px. Wenn jedoch irgendetwas im Inneren dieses Elements eingefügt wird, einschließlich padding, wird der Rand nicht mehr minimiert und wird wie jedes Feld mit Inhalt behandelt.

Wissen testen

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

Minimierung des Rands verhindern

Wenn ein Element absolut positioniert wird, mit position: absolute 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 auch nicht minimiert, da die beiden Elemente mit Blockrand nicht mehr benachbarte gleichgeordnete Elemente sind, sondern nur Geschwister.

In der Lektion zum Layout haben Sie gelernt, dass Flexbox- und Rastercontainer Blockcontainer sehr ähnlich sind. ihre untergeordneten Elemente jedoch sehr unterschiedlich handhaben. Dies gilt auch für die Minimierung des Rands.

Wenn wir das ursprüngliche Beispiel aus der Lektion nehmen und eine Flexbox mit Spaltenrichtung anwenden, werden die Margen kombiniert, statt minimiert. Dies kann Vorhersehbarkeit bei Layoutarbeiten ermöglichen, Dafür sind Flexbox- und Rastercontainer konzipiert.

Das Minimieren von Ränder und Minimieren der Ränder ist aber im Detail zu verstehen, wie sie funktionieren, ist sehr nützlich, diese ausführliche Erklärung wird dringend empfohlen.

Abstand

Statt Platz an der Außenseite der Box zu schaffen, wie margin, Stattdessen wird mit der Eigenschaft padding Platz innerhalb des Felds eingefügt: wie Dämmung.

Das hängt davon ab, welches Boxmodell Sie verwenden. Box-Modell-Lektion – padding kann sich auch auf die Gesamtabmessungen des Elements auswirken.

Die Property padding ist eine Abkürzung 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.

Positionierung

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

• Ein Element mit position: relative behält seine Position im Dokumentfluss bei, auch wenn Sie diese Werte festlegen. Auch sie werden relativ zur Position Ihres Elements sein.
• Ein Element mit position: absolute basieren die Richtungswerte auf der Position des relativen übergeordneten Elements.
• Ein Element mit position: fixed basieren die Richtungswerte auf dem Darstellungsbereich.
• Ein Element mit position: sticky wendet die Richtungswerte nur an, wenn das Gerät angedockt/steckt.

Im Modul Logische Attribute erfahren Sie mehr über die Properties 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 und akzeptieren daher entweder einen Wert, der für start und end festgelegt werden soll, oder zwei individuelle Werte.

Raster und Flexbox

Sowohl im Raster als auch in der Flexbox können Sie die Eigenschaft gap verwenden, um Platz zwischen untergeordneten Elementen zu schaffen. Die Eigenschaft gap ist eine Abkürzung für row-gap und column-gap, akzeptiert ein oder zwei Werte, Längen oder Prozentsätze. Sie können auch Keywords wie unset, initial und inherit verwenden. Wenn Sie nur einen Wert definieren, wird derselbe gap auf die Zeilen und Spalten angewendet, aber wenn Sie beide Werte definieren, der erste Wert row-gap und der zweite Wert column-gap.

Sowohl mit der Flexbox als auch mit dem Raster können Sie Platz schaffen, indem Sie ihre Verteilungs- und Ausrichtungsfunktionen nutzen. über die wir im Grid-Modul und Flexbox-Modul.

Einheitliche Abstände erstellen

Es ist eine gute Idee, sich für eine Strategie zu entscheiden und dabei zu bleiben. um eine einheitliche Benutzeroberfläche mit gutem Ablauf und Rhythmus zu schaffen. Dies lässt sich am besten erreichen, indem Sie einheitliche Maße für die Abstände verwenden.

Zum Beispiel könnten Sie sich verpflichten, 20px zu verwenden als einheitliches Maß für alle Lücken zwischen Elementen – sogenannte Spaltenabstände –, also dass alle Layouts einheitlich aussehen und sich anfühlen. Sie können auch 1em als vertikalen Abstand zwischen Ablaufinhalten verwenden, Damit wird ein konsistenter Abstand basierend auf dem font-size-Wert des Elements erreicht. Egal für welche Option Sie sich entscheiden, sollten Sie diese Werte als Variablen (oder benutzerdefinierte CSS-Eigenschaften) speichern. um diese Werte zu tokenisieren und die Konsistenz etwas 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 einmalig definieren, und verwenden Sie sie im gesamten CSS. Wenn sie aktualisiert werden, entweder lokal innerhalb eines Elements oder global, werden die Werte durch die Kaskade weitergegeben und die aktualisierten Werte werden übernommen.

Wissen testen

Testen Sie Ihr Wissen über die Abstände