CSS/Tutorials/Boxmodell/padding
Text-Info
- 30min
- mittel
- HTML
Sinnvoll sind die hier beschriebenen CSS-Eigenschaften für alle HTML-Elemente, die einen eigenen Absatz erzeugen bzw. einen Block bilden, also etwa für h[1-6], p, blockquote, div, address oder pre. Sinnvoll sind die Angaben zum Innenabstand ferner, wenn Sie außerdem CSS-Eigenschaften für Rahmen oder für Farben oder Grafiken zum Hintergrund eines Elements notieren. Denn erst dann werden die Abstände zwischen Elementgrenze und Elementinhalt richtig sichtbar. Sinnvoll sind die hier beschriebenen Eigenschaften daher auch für die Zellenelemente td von HTML-Tabellen.
box-sizing den Wert content-box hat oder nicht gesetzt ist.Inhaltsverzeichnis
padding (Innenabstand allgemein)[Bearbeiten]
Diese Angabe ist eine Zusammenfassung der möglichen Einzelangaben padding-top, padding-right, padding-bottom und padding-left. Solcherart Eigenschaften bezeichnet man auch als zusammenfassende Eigenschaften (shorthand properties).
.typA { padding: 1em; border: 1px solid red }
.typB { padding: 1em 2em; background-color: #dddddd }
.typC { padding: 1em 2em 3em; border: 1px solid red }
.typD { padding: 1em 2em 3em 4em; background-color: #dddddd }
Mit padding können Sie den Abstand für oben, rechts, unten und links bestimmen. Erlaubt sind ein bis vier nicht negative numerische Längenmaße sowie die Werte auto oder inherit.
- Eine Angabe: für alle 4 Abstände gilt derselbe Wert
- Zwei Angaben: 1. Wert für padding-top und padding-bottom, 2. Wert für padding-left und padding-right
- Drei Angaben: 1. Wert für padding-top, 2. Wert für padding-left und padding-right, 3. Wert für padding-bottom
- Vier Angaben: 1. Wert für padding-top, 2. Wert für padding-right, 3. Wert für padding-bottom, 4. Wert für padding-left (Merkhilfe: Uhrzeigerbewegung)
padding-top (Innenabstand oben)[Bearbeiten]
Mit dieser Eigenschaft können Sie den Zwischenraum zwischen Elementinhalt und oberer Elementgrenze (sichtbar bei Rahmen, Farben usw.) bestimmen. Erlaubt ist ein numerisches Längenmaß, das aber nicht negativ sein darf.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>padding-top</title>
<style>
p { width: 30em; padding-top: 100px; border: 1px solid red; }
</style>
</head>
<body>
<p>... Textabsatz mit 100 Pixel Innenabstand nach oben ...</p>
</body>
</html>
padding-right (Innenabstand rechts)[Bearbeiten]
Mit dieser Eigenschaft können Sie den Zwischenraum zwischen Elementinhalt und rechter Elementgrenze (sichtbar bei Rahmen, Farben usw.) bestimmen. Erlaubt ist ein numerisches Längenmaß, das aber nicht negativ sein darf.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>padding-right</title>
<style>
p { width: 30em; padding-right: 100px; border: 1px solid red; }
</style>
</head>
<body>
<p>... Textabsatz mit 100 Pixel Innenabstand nach rechts ...</p>
</body>
</html>
padding-bottom (Innenabstand unten)[Bearbeiten]
Mit dieser Eigenschaft können Sie den Zwischenraum zwischen Elementinhalt und unterer Elementgrenze (sichtbar bei Rahmen, Farben usw.) bestimmen. Erlaubt ist ein numerisches Längenmaß, das aber nicht negativ sein darf.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>padding-bottom</title>
<style>
p { width: 30em; padding-bottom: 100px; border: 1px solid red; }
</style>
</head>
<body>
<p>... Textabsatz mit 100 Pixel Innenabstand nach unten ...</p>
</body>
</html>
padding-left (Innenabstand links)[Bearbeiten]
Mit dieser Eigenschaft können Sie den Zwischenraum zwischen Elementinhalt und linker Elementgrenze (sichtbar bei Rahmen, Farben usw.) bestimmen. Erlaubt ist ein numerisches Längenmaß, das aber nicht negativ sein darf.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>padding-left</title>
<style>
p { width: 30em; padding-left: 100px; border: 1px solid red; }
</style>
</head>
<body>
<p>... Textabsatz mit 100 Pixel Innenabstand nach links ...</p>
</body>
</html>
Padding-bottom height fix[Bearbeiten]
Wenn Sie für padding-bottom oder padding-top einen prozentualen Wert verwenden, wird dieser nach der Breite des Elements berechnet. Dies können Sie sich zunutze machen, wenn Sie ein bestimmtes Seitenverhältnis anstreben.
.quadrat {
width: 500px;
height: 0;
padding-bottom: 100%;
So entsteht ein Quadrat mit gleichen Seitenlängen. Auch ein festes Verhältnis von 16:9 ist so möglich:
.videoscreen {
width: 1000px;
height: 0;
padding-bottom: 56.25%;
background: url(/images/happy-birthday.svg);
aspect-ratio[Bearbeiten]
Einfacher geht dies heutzutage mit der aspect-ratio-Eigenschaft, die auch Elemente mit Inhalt formatieren kann.
Siehe auch
- css-tricks: Aspect Ratio Boxes (Boxen mit festen Seitenverhältnissen)
- Bilderwand aus Quadraten (im Grid Layout)
- SVG/Tutorials/Einstieg/SVG in responsiven Webseiten#padding-bottom height fix (festes Seitenverhältnis für SVG-Grafiken)
display:tabledaran gehindert, jedes Mal die volle zur Verfügung stehende Breite des Elternelements zu belegen und stattdessen nur so breit wie für den Textinhalt notwendig zu sein. Dies ist notwendig, damit der Innenabstand nach rechts deutlich sichtbar ist. Man hätte zwar gleich Tabellen dafür verwenden können, das wäre aber aus semantischer Sicht hier nicht sinnvoll.