Die CSS padding Eigenschaft wird verwendet um Raum um einen Inhalt eines HTML-Elementes zu generieren, innerhalb von border(Grenzen).
Mit CSS hast du die volle Kontrolle über padding(Polsterung).
Da sind padding Eigenschaften um Leerraum auf jeder Seite des Elementes zu generieren.
padding-top
padding-right
padding-bottom
padding-left
Die padding Eigenschaften können folgende Werte haben:
Länge, pt, cm, etc.
% von der Weite vom Inhalt des Elementes.
inherit-Element.
Bemerke: Negative Werte sind nicht erlaubt.
<!DOCTYPE html>
<html>
<head>
<style>
p.demo1 {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 150px;
}
</style>
</head>
<body>
<h2>Verwende vier padding Werte für jede Seite:</h2>
<p class="demo1">Dieses p Element hat ein padding von 50px oben , rechts ein padding von 30px, unten ein padding von 50px, links ein padding von 150px.</p>
</body>
</html>
Um den Code zu kürzen, es ist möglich die padding Eigenschaften mit vier Werten zu schreiben.
So, hier ein Beispiel wie es funktioniert:
Wenn die padding Eigenschaft vier Werte aufweist:
padding: 25px 50px 75px 100px;
oben padding ist 25px
rechts padding ist 50px
unten padding ist 75px
links padding ist 150px
<!DOCTYPE html>
<html>
<head>
<style>
p.demo2 {
border: 1px solid black;
background-color: lightblue;
padding: 25px 50px 75px 150px;
}
</style>
</head>
<body>
<h2>Verwende die padding Eigenschaft zum bestimmen die Polsterung auf jeder Seite:</h2>
<p class="demo2">Dieses p Element hat ein padding von 25px oben , rechts ein padding von 50px, unten ein padding von 75px, links ein padding von 150px.</p>
</body>
</html>
Wenn die padding Eigenschaft drei Werte zugewiesen werden:
padding: 25px 150px 75px;
oben padding ist 25px
rechts und links paddings sind 150px
unten padding ist 75px
<!DOCTYPE html>
<html>
<head>
<style>
p.demo3 {
border: 1px solid black;
background-color: lightblue;
padding: 25px 150px 75px;
}
</style>
</head>
<body>
<h2>Verwende drei padding Werte zum bestimmen die Polsterung auf jeder Seite:</h2>
<p class="demo3">Dieses p Element hat ein padding von 25px oben , rechts und links ein padding von 150px und unten ein padding von 75px.</p>
</body>
</html>
Wenn die padding Eigenschaft zwei Werte hat:
padding: 25px 150px;
oben und unten paddings sind 25px
rechts und links paddings sind 150px
<!DOCTYPE html>
<html>
<head>
<style>
p.demo4 {
border: 1px solid black;
background-color: lightblue;
padding: 25px 150px;
}
</style>
</head>
<body>
<h2>Verwende zwei padding Werte zum bestimmen die Polsterung auf jeder Seite:</h2>
<p class="demo4">Dieses p Element hat ein padding von 25px oben / unten und rechts und links ein padding von 150px.</p>
