CSS border, position, margin… Alles Begriffe, die Dir dabei helfen können, das Layout Deiner Webseite am Laptop selbst zu gestalten – wenn man denn versteht, wie. Eines der wichtigsten Hilfsmittel stellt die Kurzschrift padding dar. Was bedeutet sie? Wie gibt man sie an? Und wie verwendet man sie?
Was bedeutet padding?
Auch im CSS-Bereich der Programmiersprachen kommt die Kurzschrift padding zum Einsatz. Im Regelfall fasst man damit den Raum eines HTML-Elementes zusammen. Mit eingeschlossen sind davon die Maße des entsprechenden Elementes.
Inwieweit ist in diesem Zusammenhang die shorthand CSS border relevant? Die Kurzschrift erlaubt es quasi, Grenzen zu ziehen – sowohl zwischen dem Inhalt des Elementes und dessen Rahmen (border), als auch zwischen den Elementen selbst.
Padding – was aus dem Englischen mit der Bezeichnung „Polster“ übersetzt wird – bietet also genug Polsterung zwischen Rahmen und Elementen auf einer Webseite. Aus diesem Grund dient die shorthand auch der Abstandsbezeichnung und stellt somit einen wichtigen Teil in der Webdesign-Branche dar.
Warum ist überhaupt wichtig?
Die Gestaltung des Inhalts in einem HTML-Element bzw. die Rahmenbreite strukutiert sich im Normfall durch die Eingabe der Breiteneigenschaft (width).
Genau hier liegt der Knackpunkt: Stimmen beide Eingaben überein – das heißt, sind sie durch dieselben Zahlen ausgedrückt – gibt es keinen Abstand Inhalt und Rahmen. Dadurch wirkt das entsprechende Element letztlich eingeengt und geknetscht; die Formatierung leidet darunter; das Layout der Webseite sieht letzten Endes ästhetisch weniger schön aus. Eingesetzte Polster – wie zum Beispiel durch den Gebrauch dieser Kurzschrift – stellen hierbei Abhilfe dar.
Innen vs. außen
Eine wichtige Unterscheidung sollte vor diesem Hintergrund zwischen den Kurzschriften padding und margin gemacht werden.
Mit padding wird all das bezeichnet, was in einem Element vor sich geht – der Abstand Inhaltes eines Elementes zum Rahmen sowie die Gestaltung dessen.
Währenddessen nimmt margin Bezug darauf, was außerhalb des Rahmens passiert: Das heißt, der Abstand zwischen einzelnen Elementen untereinander wird mithilfe des shorthand margin geregelt.
Positionen und Verwendung
First things first: Angegeben wird das padding im Regelfall in Pixel (px), Prozent (%) oder Ems (em). Das betrifft sowohl die angegebene Länge als auch die Breite.
Die Kurzschrift kann auf zweierlei Weise verwendet werden. Wird es ohne Eigenschaftszusatz angegeben, betrifft der angegebene Wert alle Seiten gleichermaßen; das heißt, die Maße sind überall gleich. Hat man ein zum Beispiel einen Schriftzug, der rundherum 5 Pixel vom Rahmen fassen soll, würde man schreiben: „padding: 5px;“
Du kannst aber auch mithilfe der vier unterschiedlichen Arten spezifizieren, welche Seite des Elementes Du anpassen willst: ob top (oben), right (rechts), bottom (unten) oder left (links).
Randnotiz: Bei der Angabe wird immer mit der Oberseite (top) angefangen und dann im Uhrzeigersinn fortgeführt. Sprich: top – right – bottom – left.
Möchtest Du nun einen benutzerdefinierten Abstand einstellen – sagen wir mit 3 Pixeln zur Ober- wie Unterseite und 4 Pixeln links und rechts – würde das im Zusammenspiel mit Breite, Rahmen und margin folgendermaßen aussehen:
.box1 {
width: 300px;
padding: 4px 3px 4px 3px;
border: 2px;
margin 8 px }Padding kann auch verwendet werden, um den Inhalt eines HTML-Elements zu zentrieren. Dazu wird der linke und der rechte Wert auf 50% gesetzt.
Aufgepasst: Die Kurzschrift kann nicht negativ gesetzt werden. Der kleinste Grundwert ist in diesem Zusammenhang 0.
Auf einen Blick
Das CSS padding ist eine im Programmieren geläufige Kurzschrift, die es ermöglicht, den Abstand innerhalb eines HTML-Elementes zum Rahmen auf einer Webseite nach Belieben zu regeln. Dadurch ändert sich auch die Formatierung selbst.
Man unterscheidet hierbei zwischen margin und padding. Während margin die Abstandsregelungen außerhalb des Elementes meint, bezieht sich Letzteres auf die innerhalb des Rahmens.
Außerdem kann das padding in Pixel, Prozenten oder Ems angeben werden. Man kann den Abstand auf allen Seiten gleich einstellen oder die Seiten spezifizieren.
FAQ zum Thema padding
Diese Kurzschrift ist dafür verantwortlich, den Abstand in einem HTML-Element zwischen Inhalt und Rahmen zu regeln.
Das erste bezieht sich auf den Abstand zwischen einzelnen Elementen untereinander – also den Abstand außerhalb des Rahmens eines HTML-Elementes. Das zweite strukturiert den Abstand innerhalb des Rahmens.
Das bezieht sich auf den Abstand der Oberseite – das heißt, der Abstand zwischen dem Elementinhalt und dem Rahmen im oberen Bereich.