CSS: Padding erstellen – CSS Kurs

Ad

Ein Padding in CSS ist ein definierter Abstand um das Element in Pixel oder in Prozent

So erstellst du Padding in CSS:

Die CSS-Eigenschaft padding definiert den Abstand zwischen dem Inhalt eines Elements und seinem Rahmen.

1. Alle Seiten gleichzeitig:

CSS
padding: wert;

Beispiel:

CSS
padding: 20px; /* Fügt 20 Pixel Padding auf allen Seiten hinzu */

Einzelne Seiten:

CSS
padding-top: wert;
padding-right: wert;
padding-bottom: wert;
padding-left: wert;

Beispiel:

CSS
padding-top: 10px; /* 10 Pixel Padding oben */
padding-right: 20px; /* 20 Pixel Padding rechts */
padding-bottom: 30px; /* 30 Pixel Padding unten */
padding-left: 40px; /* 40 Pixel Padding links */

Abkürzungen:

CSS
padding: oben-unten rechts-links;

Beispiel:

CSS
padding: 15px 25px; /* 15 Pixel Padding oben und unten, 25 Pixel Padding rechts und links */

Prozentangaben:

CSS
padding: prozentwert;

Beispiel:

CSS
padding: 5%; /* Fügt 5% des übergeordneten Elements als Padding hinzu */

Erklärung:

  • Der Wert für padding kann in Pixeln, Prozenten oder anderen Maßeinheiten angegeben werden.
  • Prozentangaben beziehen sich auf die Größe des übergeordneten Elements.
  • Wenn du nur einen Wert angibst, wird dieser gleichmäßig auf alle Seiten angewendet.
  • Mit der zweiten Syntax kannst du die Padding-Werte für jede Seite einzeln festlegen.

Zusätzliche Informationen:

  • Padding wird zur Breite und Höhe des Elements addiert.
  • Um den Abstand zwischen Elementen zu vergrößern, verwende die CSS-Eigenschaft margin.
  • Achte auf die Konsistenz in deinem CSS-Code, um ein einheitliches Erscheinungsbild zu gewährleisten.

Über Mich


Weitere Beiträge auf Blogseite.com




Kennst du schon diese Memes?