CSS padding-top Eigenschaft
Wie man die CSS-Eigenschaft padding-top verwendet, um den Innenabstand oben an einem Element festzulegen. Werte und Beispiele.
Die CSS-Eigenschaft padding-top legt die Höhe des Innenabstands auf der oberen Seite eines Elements fest — den Abstand zwischen dem Inhalt des Elements (oder seinem oberen Rahmen) und dem darüber liegenden Inhalt innerhalb der Box.
Padding ist die innerste Schicht des CSS-Box-Modells: Von innen nach außen gibt es den Inhalt, dann das Padding, dann den Rahmen und dann den Margin. Anders als Margin befindet sich das Padding innerhalb des Elements, teilt also die Hintergrundfarbe des Elements und gehört zum klickbaren/sichtbaren Bereich.
Verwenden Sie padding-top, wenn Sie Inhalt vom oberen Rand seines Containers nach unten verschieben möchten — zum Beispiel, um einer Überschrift unterhalb des oberen Rahmens einer Karte Luft zu verschaffen, oder um vertikalen Rhythmus innerhalb eines Buttons oder Hinweisfelds hinzuzufügen, ohne den Abstand zwischen separaten Elementen zu beeinflussen (dafür ist Margin zuständig).
Negative Werte sind nicht gültig. Wenn Sie Inhalt nach oben verschieben möchten, verwenden Sie stattdessen einen negativen margin-top.
Diese Eigenschaft hat keinen sichtbaren Effekt auf Inline-Elemente wie <span> — vertikales Padding an einer Inline-Box ändert nicht die Zeilenhöhe und schiebt benachbarte Zeilen nicht auseinander. Setzen Sie display: inline-block oder display: block am Element, wenn das obere Padding wirksam sein soll.
| Anfangswert | 0 |
|---|---|
| Gilt für | Alle Elemente, außer wenn die display-Eigenschaft auf table-row-group, table-header-group, table-footer-group, table-row, table-column-group oder table-column gesetzt ist. Gilt auch für ::first-letter. |
| Vererbbar | Nein. |
| Animierbar | Ja. Der Innenabstand ist animierbar. |
| Version | CSS1 |
| DOM-Syntax | object.style.paddingTop = "10px"; |
Syntax
Syntax der CSS-Eigenschaft padding-top
padding-top: length | initial | inherit;Beispiel der padding-top-Eigenschaft:
Beispiel der CSS-Eigenschaft padding-top mit px-Wert
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
border: 2px solid #666;
color: #8ebf42;
padding-top: 30px;
}
</style>
</head>
<body>
<h2>Padding-top property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Ergebnis
Beispiel der padding-top-Eigenschaft mit dem Wert "em".
Beispiel der CSS-Eigenschaft padding-top mit em-Wert
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
border: 2px solid #666;
color: #8ebf42;
padding-top: 4em;
}
</style>
</head>
<body>
<h2>Padding-top property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Ein em-Wert ist relativ zur eigenen font-size des Elements, sodass padding-top: 4em mit dem Text skaliert. Das ist praktisch, wenn der Abstand zusammen mit der Schriftgröße wachsen und schrumpfen soll.
Beispiel der padding-top-Eigenschaft mit Prozentwert:
Der Prozentwert ist besonders: Er wird relativ zur Breite des übergeordneten Blocks berechnet, nicht zu dessen Höhe. padding-top: 15% bedeutet also 15 % der Breite des Elternelements. Diese Eigenheit bildet die Grundlage der klassischen Seitenverhältnis-Technik, um eine Box beim Skalieren proportional zu halten.
Beispiel der CSS-Eigenschaft padding-top mit "%"-Wert:
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
border: 2px solid #cccccc;
color: #8ebf42;
padding-top: 15%;
}
</style>
</head>
<body>
<h2>Padding-top property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| length | Legt den oberen Innenabstand in px, pt, cm usw. fest. Der Standardwert ist 0. | Ausprobieren » |
| % | Legt den oberen Innenabstand in % der Breite des enthaltenden Elements fest. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom Elternelement. |
padding-top vs. die padding-Kurzschreibweise
padding-top steuert eine einzelne Seite. Wenn Sie mehrere Seiten gleichzeitig festlegen, ist die padding-Kurzschreibweise kürzer. Diese beiden Regeln sind gleichwertig:
/* longhand */
padding-top: 30px;
padding-right: 10px;
padding-bottom: 30px;
padding-left: 10px;
/* shorthand: top right bottom left (clockwise) */
padding: 30px 10px 30px 10px;Mit zwei Werten setzt padding: 30px 10px oben/unten auf 30px und links/rechts auf 10px. Greifen Sie zur Langform padding-top, wenn Sie nur die obere Seite ändern und die anderen unberührt lassen möchten. Siehe auch padding-bottom für die gegenüberliegende Seite.
Wie padding-top die Elementgröße beeinflusst
Standardmäßig (box-sizing: content-box) wird Padding zur deklarierten height hinzuaddiert. Ein Element mit height: 100px und padding-top: 30px wird 130px hoch gerendert. Wenn Sie box-sizing: border-box setzen, wird das Padding stattdessen innerhalb der deklarierten Höhe gezeichnet, sodass das Element 100px hoch bleibt und der Inhaltsbereich schrumpft. Dies ist eine häufige Ursache für "Warum ist meine Box zu hoch"-Fehler.