CSS padding-Eigenschaft
Lernen Sie, wie die CSS padding-Eigenschaft Innenabstand innerhalb des Rahmens eines Elements erzeugt. Syntax, Werte und Besonderheiten.
Die padding-Eigenschaft fügt Platz zwischen dem Inhalt eines Elements und seinem Rahmen hinzu. Im Gegensatz zu margin, das Elemente von außen voneinander wegschiebt, wirkt padding von innen — es vergrößert den klickbaren oder sichtbaren Bereich des Elements, während der Rahmen an seiner Stelle bleibt.
Padding-Werte werden als Längen oder Prozentwerte angegeben und sind immer nicht-negativ.
Negative Werte sind für padding nicht zulässig. Verwenden Sie ein negatives margin, wenn Sie Inhalte nach innen ziehen möchten.
padding ist eine Kurzschreibweise, die alle vier Seiten auf einmal festlegt. Sie können auch jede Seite einzeln steuern:
Wie padding in das Box-Modell passt
Jedes HTML-Element ist in das CSS-Box-Modell eingebettet: Inhalt → padding → Rahmen → margin, von innen nach außen. Padding liegt zwischen dem Inhaltsbereich und dem Rahmen und gehört daher zum Hintergrundbereich des Elements.
Wenn Sie box-sizing: border-box setzen (die moderne Voreinstellung in den meisten Resets), wird padding in die deklarierten width- und height-Werte einbezogen. Mit dem älteren box-sizing: content-box wird padding zusätzlich zu diesen Maßen addiert. Weitere Details finden Sie unter box-sizing.
Eigenschaftsreferenz
| Anfangswert | 0 |
| Gilt für | Alle Elemente außer table-row-group, table-header-group, table-footer-group, table-row, table-column-group und table-column. Gilt auch für ::first-letter. |
| Vererbbar | Nein |
| Animierbar | Ja |
| Version | CSS1 |
| DOM-Syntax | element.style.padding = "30px" |
Syntax
padding: <length> | <percentage> | initial | inherit;Ein-bis-vier-Werte-Regel
Die Kurzschreibweise akzeptiert einen, zwei, drei oder vier durch Leerzeichen getrennte Werte. Die Zuordnung folgt der Uhrzeigerrichtung: oben → rechts → unten → links.
| Angegebene Werte | Oben | Rechts | Unten | Links |
|---|---|---|---|---|
padding: 20px | 20px | 20px | 20px | 20px |
padding: 20px 40px | 20px | 40px | 20px | 40px |
padding: 10px 20px 30px | 10px | 20px | 30px | 20px |
padding: 10px 20px 30px 40px | 10px | 20px | 30px | 40px |
Eine hilfreiche Eselsbrücke: Fehlende Werte spiegeln die gegenüberliegende Seite (links spiegelt rechts; unten spiegelt oben).
Beispiele
Vier Werte (oben / rechts / unten / links)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 15px 30px 20px 40px;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>Der Absatz erhält 15 px oben, 30 px rechts, 20 px unten und 40 px links.
Prozentwerte
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 5% 10% 10% 5%;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>Prozentuale Padding-Werte — einschließlich padding-top und padding-bottom — werden immer relativ zur Breite des umgebenden Blocks berechnet, nicht zu dessen Höhe. Dies macht es einfach, Seitenverhältnis-Boxen zu erstellen: Ein Block mit padding-top: 56.25% behält ein 16:9-Verhältnis unabhängig von seiner Breite.
Zwei Werte (vertikal / horizontal)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 20px 40px;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>padding: 20px 40px setzt 20 px oben und unten sowie 40 px links und rechts — eine kompakte Möglichkeit, symmetrischen Abstand anzuwenden.
Werte
| Wert | Beschreibung |
|---|---|
length | Eine feste Größe in einer beliebigen CSS-Längeneinheit: px, em, rem, pt, cm usw. Standardwert ist 0. |
% | Ein Prozentsatz der Breite des umgebenden Blocks (gilt für alle vier Seiten). |
initial | Setzt die Eigenschaft auf ihren Standardwert zurück (0). |
inherit | Übernimmt den berechneten Wert vom übergeordneten Element. |
Logische Eigenschaften (schreibrichtungsabhängig)
Für internationalisierte Layouts, die vertikalen oder rechts-nach-links-Text unterstützen, können die physischen Seiten padding-top/right/bottom/left unpassend wirken. CSS bietet logische Eigenschaften, die die Schreibrichtung berücksichtigen:
| Logische Eigenschaft | Entspricht im horizontalen LTR |
|---|---|
padding-block-start | padding-top |
padding-block-end | padding-bottom |
padding-inline-start | padding-left |
padding-inline-end | padding-right |
Die Kurzschreibweisen sind padding-block und padding-inline.
/* Equivalent to padding-top + padding-bottom */
padding-block: 16px;
/* Equivalent to padding-left + padding-right */
padding-inline: 24px;Diese werden in allen modernen Browsern unterstützt und sind in Komponentenbibliotheken mit bidirektionalem Text bevorzugt.
Häufige Anwendungsfälle und Besonderheiten
Klickbarer Bereich. Da padding Teil des Hintergrunds und der Ereigniserfassungsregion des Elements ist, vergrößert eine Erhöhung des paddings auf einem Button oder Link die Zielfläche — ein direkter Vorteil für die mobile Bedienbarkeit.
Padding bei Inline-Elementen. Horizontales padding bei Inline-Elementen (wie <span>) funktioniert wie erwartet. Vertikales padding wird visuell angewendet, schiebt jedoch benachbarte Zeilen nicht auseinander; verwenden Sie ein Block- oder Inline-Block-Element, wenn Sie einen vertikalen Rhythmus benötigen.
Padding vs. margin. Verwenden Sie padding, wenn die Hintergrundfarbe oder der Rahmen den zusätzlichen Raum abdecken soll. Verwenden Sie margin, wenn der Platz transparent und außerhalb des Rahmens sein soll.
box-sizing-Interaktion. Bei content-box macht das Hinzufügen von padding das Element visuell größer. Bei border-box wird padding innerhalb der deklarierten Breite absorbiert, wodurch das Layout vorhersehbar bleibt. Siehe box-sizing.
Tabellen. Die padding-Kurzschreibweise hat keine Wirkung auf Tabellenzeilen oder Spaltengruppen. Verwenden Sie stattdessen padding auf <td>- und <th>-Zellen, oder nutzen Sie border-spacing für Abstände zwischen Zellen.