CSS/Eigenschaften/Abstand/padding
Innenabstand (padding, englisch: Polsterung) ist ein erzwungener Leerraum zwischen dem Inhalt eines Elements und seinem eigenen Elementrand, also z.B. zwischen dem Text eines Elements und dem Rand dieses Elements.
Inhaltsverzeichnis
Allgemeines[Bearbeiten]
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.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 (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).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>padding</title>
<style>
p { display: table; }
.typA { padding: 1cm; border: 1px solid red }
.typB { padding: 1cm 2cm; background-color: #dddddd }
.typC { padding: 1cm 2cm 3cm; border: 1px solid red }
.typD { padding: 1cm 2cm 3cm 4cm; background-color: #dddddd }
</style>
</head>
<body>
<h1>Verwendung von <code>padding</code></h1>
<p class="typA">typA mit padding: 1cm</p>
<p class="typB">typB mit padding: 1cm 2cm</p>
<p class="typC">typC mit padding: 1cm 2cm 3cm</p>
<p class="typD">typD mit padding: 1cm 2cm 3cm 4cm</p>
</body>
</html>
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)
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.