CSS-Abstand
Die CSS-Polsterung-Eigenschaft wird verwendet, um Platz um den Inhalt eines Elements zu schaffen. CSS bietet verschiedene Eigenschaften, mit deren Hilfe Sie den Innenabstand für jede Seite eines Elements festlegen können (rechts, links, oben und unten).
Die einzelnen Seiten
Mit Hilfe der folgenden Eigenschaften können Sie den Innenabstand für jede Seite eines Elements festlegen:
Wie Sie sich denken können, verwenden wir für oben padding-top, für unten padding-bottom, für die linke Seite padding-left und für die rechte Seite padding-right.
Alle Padding-Eigenschaften können die folgenden Werte haben:
- length, wird verwendet, um einen Innenabstand in px, pt, cm usw. anzugeben,
- %, gibt einen Innenabstand in % der Breite des umschließenden Elements an,
- inherit, gibt an, dass der Innenabstand vom übergeordneten Element geerbt werden muss.
Beachten Sie, dass die CSS-Padding-Eigenschaft keine negativen Werte akzeptieren kann. Ihr Standardwert für alle Padding-Eigenschaften ist 0.
Beispiel für die einzelnen Padding-Eigenschaften:
Beispiel für die Verwendung einzelner Padding-Eigenschaften:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: yellow;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Individual padding properties</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..
</div>
</body>
</html>Padding als Kurzschreibweise
Die CSS-Padding-Eigenschaft ist eine Kurzschreibweise für die folgenden einzelnen Padding-Eigenschaften:
In den Fällen, in denen die Padding-Eigenschaft nur 1 Wert hat, zum Beispiel padding: 35px, sind alle vier Innenabstände 35px.
Beispiel für die Padding-Kurzschreibweise mit einem Wert:
Beispiel für die Padding-Kurzschreibweise mit einem Wert:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: green;
padding: 35px;
}
</style>
</head>
<body>
<h2>Individual padding properties</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>Die Padding-Eigenschaft kann 2 Werte haben, zum Beispiel padding: 20px 40px, wobei die Innenabstände oben und unten 20px und rechts und links 40px betragen.
CSS-Padding mit 2 Zahlen Beispiel
p {
padding: 20px 40px;
}Das ist dasselbe wie im obigen Code.
CSS-Padding mit 2 Zahlen Beispiel, ausführliche Variante, Code
p {
padding-top: 20px;
padding-right: 40px;
padding-bottom: 20px;
padding-left: 40px;
}Beispiel für die Padding-Kurzschreibweise mit zwei Werten:
CSS-Padding-Beispielcode
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: white;
padding: 20px 40px;
}
</style>
</head>
<body>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>Ergebnis
Die Padding-Eigenschaft kann 3 Werte haben, zum Beispiel padding: 20px 15px 35px;, wobei der obere Innenabstand 20px, die rechten und linken Innenabstände 15px und der untere Innenabstand 35px beträgt.
CSS-Padding mit 3 Zahlen Beispiel, Code
p {
padding: 20px 15px 35px;
}Das ist dasselbe wie im obigen Code.
CSS-Padding mit 3 Zahlen Beispiel, ausführliche Variante, Code
p {
padding-top: 20px;
padding-right: 15px;
padding-bottom: 35px;
padding-left: 15px;
}Beispiel für die Padding-Kurzschreibweise mit drei Werten:
Beispiel für die Padding-Kurzschreibweise mit drei Werten:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: lightblue;
padding: 20px 15px 35px;
}
</style>
</head>
<body>
<h2>Example of the padding shorthand property</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>Und schließlich kann die Padding-Eigenschaft vier Werte haben, zum Beispiel padding: 25px 50px 75px 100px;, wobei der obere Innenabstand 25px, der rechte Innenabstand 50px, der untere Innenabstand 75px und der linke Innenabstand 100px beträgt.
CSS dasselbe Padding-Beispiel
p {
padding: 25px 50px 75px 100px;
}Beispiel für die Padding-Kurzschreibweise mit vier Werten:
Beispiel für die Padding-Kurzschreibweise mit zwei Werten:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #95e5f7;
padding: 25px 50px 75px 100px;
}
</style>
</head>
<body>
<h2>Example of the padding shorthand property</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>Übung
What describes the 'padding' property in CSS correctly?