Auffüllung und Ränder in CSS: Der vollständige Leitfaden • BUOM

5. Januar 2021

Wenn Sie im Webdesign arbeiten, müssen Sie Programmiersprachen wie CSS erlernen. Webdesigner verwenden CSS, um die visuellen Aspekte von Websites zu beschreiben, wie zum Beispiel Farben und Schriftarten. Um effektiv mit CSS zu gestalten, ist es wichtig, Begriffe wie Ränder und Innenabstand zu lernen. In diesem Artikel diskutieren wir, was Padding und Padding in CSS bedeuten, und schauen uns Tipps zur Beherrschung beider Konzepte an.

Was ist der Unterschied zwischen Padding und Margin in CSS?

In CSS beziehen sich die Begriffe „Rand“ und „Padding“ auf die Ränder um Webseitenelemente wie Text und Bilder. Allerdings beziehen sich diese beiden Begriffe auf unterschiedliche Bereiche:

• Ränder: Ränder geben den Raum um die Außenseite eines Elements an. Ränder dienen dazu, Elemente auf der Seite nach oben, unten, links oder rechts zu verschieben. Sie erzeugen außerdem Leerraum zwischen den Elementen, um die Lesbarkeit zu verbessern. Sie können die Ränder auf jeder Seite des Elements anpassen. Mit zunehmender Feldgröße entfernen sich benachbarte Elemente weiter und umgekehrt.

• Padding: Padding ist der Abstand zwischen einem Element und dem Inhalt dieses Elements. Der Abstand bestimmt, wie Elemente in einem Container angezeigt werden und wie viel vom Hintergrund des Containers angezeigt wird. Sie können die Einrückung jedes Elements in CSS ändern. Mit zunehmender Polsterung wird das Element zum Ausgleich automatisch kleiner und umgekehrt.

Was ist das CSS-Box-Modell?

Um Ränder und Abstände effektiv anwenden zu können, müssen Sie zunächst das CSS-Boxmodell verstehen. Bei der Verwendung von CSS-Stilen wird jedes HTML-basierte Inhaltselement auf einer Webseite in einem Block platziert, der quadratisch oder rechteckig sein kann. Jeder CSS-Block besteht aus vier Teilen in der folgenden Reihenfolge, von außen beginnend:

• Rand: Dies ist der leere Bereich zwischen dem Rand und den Außenkanten des Randes.

• Rand: Dies ist die Linie, die zwischen dem Rand und der Polsterung um den Umfang eines Elements verläuft.

• Polsterung: Dies ist der leere Bereich zwischen dem Rand und dem Inhalt.

• Inhalt: Dabei handelt es sich um den Text oder die Grafik innerhalb der Polsterung, bei der es sich normalerweise um ein HTML-basiertes Element handelt.

In vielen Fällen hat ein CSS-Block oder Container keinen sichtbaren Rand. Diese Komponente kann jede Farbe haben, auch transparent. Allerdings bleiben Ränder und Innenabstände in jedem CSS-Block erhalten, auch wenn sie scheinbar nicht durch einen Rahmen getrennt sind.

Tipps zum Hinzufügen von Feldern in CSS

Jedes CSS-Feld hat vier Ränder, darunter den oberen, unteren, linken und rechten Rand des Elements. Beim Festlegen von Stileinstellungen für ein CSS-Element können Sie diese vier Begriffe verwenden, um die Größe jedes Rands festzulegen:

• Der Rand ist top

• Endeffekt

• Linkes Feld

• Feld rechts

Alternativ können Sie zur Definition der Größe auch den Begriff „Rand“ verwenden. Anschließend können Sie wie folgt einen, zwei, drei oder vier Werte angeben, die für die Randseiten gelten:

• Eine Bedeutung: Es gilt für alle vier Seiten gleichermaßen.

• Zwei Werte: Der erste gilt für den oberen und unteren Rand und der zweite für den linken und rechten Rand.

• Drei Werte: Der erste gilt für den oberen Rand, der zweite für den linken und rechten Rand und der dritte für den unteren Rand.

• Vier Werte: Der erste gilt für den oberen Rand, der zweite für den rechten Rand, der dritte für den unteren Rand und der vierte für den linken Rand.

Unabhängig davon, wie viele Feldwerte Sie festlegen, können diese entweder die Länge oder den Prozentsatz darstellen. Längenbasierte Felder haben einen festen Wert, während prozentuale Felder Teil der Gesamtbreite sind.

Während Sie für jedes CSS-Feld bestimmte Ränder festlegen können, können Sie auch zulassen, dass das innere Element unabhängig von der Bildschirmgröße der Webseite automatisch zentriert wird. Setzen Sie den Randwert auf „auto“, damit das Element immer horizontal zentriert ist.

Während Ränder normalerweise Platz zwischen Elementen schaffen, können sie auch dazu führen, dass sich Elemente überlappen. Um Elemente zu überlagern, stellen Sie einfach den Rand auf einen negativen Wert ein.

Erwägen Sie das Hinzufügen von Feldern, wenn Sie möchten:

• Zentrieren Sie das Element im Container. Durch die Verwendung des Feldwerts „auto“ können Sie sicherstellen, dass das Element immer horizontal zentriert angezeigt wird, ohne dass Füllwerte berechnet werden müssen.

• Achten Sie darauf, dass sich die Elemente nicht berühren. Durch die Verwendung von Rändern können Sie Leerräume zwischen Elementen erstellen, auch wenn diese nicht aufgefüllt sind.

• Lassen Sie den vertikalen Abstand zwischen den Containern automatisch verschwinden. Wenn die Größe eines Elements in einem beliebigen Container zunimmt, verringern sich automatisch die oberen und unteren Ränder, wodurch die Website attraktiver aussehen kann.

Tipps zum Hinzufügen von Einrückungen zu CSS

Die Einstellungen und Terminologie für die Einrückung ähneln den Randeinstellungen. Sie können diese Komponente mit dem Begriff „Padding“ oder den folgenden Begriffen konfigurieren:

• Polster

• Polsterung unten

• Linker Einzug

• Rechte Ränder

Wie bei den Rändern können Sie den Abstand für eine, zwei, drei oder vier Seiten festlegen, indem Sie die Werte in der oben aufgeführten Reihenfolge eingeben. Sie können die Auffüllung auch auf Basis der Länge oder des Prozentsatzes anwenden.

Im Gegensatz zu Rändern unterstützt Padding jedoch keine negativen Werte. Darüber hinaus können Sie den Wert nicht auf „auto“ setzen, um den Einzug automatisch anzupassen. Das bedeutet, dass Sie für jedes CSS-Feld auf jeder von Ihnen entwickelten Website einen positiven Füllwert festlegen müssen.

Erwägen Sie die Verwendung von Einrückungen, wenn Sie Folgendes wünschen:

• Vergrößern Sie das Element. Wenn Sie beispielsweise den Abstand einer Schaltfläche erhöhen, wird deren Darstellung auf jedem Bildschirm verbessert, ohne dass eine größere Schriftart verwendet werden muss.

• Behalten Sie mehr Kontrolle über den Abstand von Einbauten. Durch die Verwendung von Polsterungen können Sie verhindern, dass sich Inline-Elemente überlappen oder das Design der Seite stören.

• Achten Sie darauf, dass der Inhalt nicht auf die Ränder des Behälters tropft. Durch die Verwendung von Innenabständen wird verhindert, dass sich Text in benachbarten CSS-Feldern berührt, wodurch Absätze oder Überschriften leichter lesbar werden.

• Zeigt den Hintergrund des Containers an. Sie können die Hintergründe zweier Container auch direkt nebeneinander platzieren. Durch die Verwendung von Innenabständen anstelle von Rändern können Sie zwei CSS-Ränder anpassen und gleichzeitig den Abstand zwischen dem Bild oder Text und dem Rand des Containers beibehalten.

• Legen Sie einen sichtbaren Rand fest. Mit der Polsterung können Sie zwischen dem Rand und dem Element Platz lassen, was wichtig sein kann, wenn der Rand nicht transparent ist.