Mit Padding wird um den Inhalt eines Elements innerhalb definierter Ränder Platz geschaffen.
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 70px;
border: 1px solid #4CAF50;
}
</style>
</head>
<body>
<h2>CSS Padding</h2>
<div>This element has a padding of 70px.</div>
</body>
</html>
Die CSS-Eigenschaften padding
werden verwendet, um Platz zu erzeugen Der Inhalt eines Elements innerhalb aller definierten Grenzen.
Mit CSS haben Sie die volle Kontrolle über die Auffüllung. Es gibt Eigenschaften zum Festlegen der Polsterung für jede Seite eines Elements (oben, rechts, unten und links).
CSS verfügt über Eigenschaften zum Festlegen der Auffüllung für jeden Seite eines Elements:
padding-top
padding-right
padding-bottom
padding-left
Alle Auffülleigenschaften können die folgenden Werte haben:
Länge - gibt einen Abstand in px, pt, cm usw. an.
% - gibt einen Abstand in % der Breite des enthaltenden Elements an
erben - gibt an, dass die Auffüllung vom übergeordneten Element geerbt werden soll
Hinweis: Negative Werte sind nicht zulässig.
Legen Sie unterschiedliche Polsterungen für alle vier Seiten eines <div>-Elements fest:
div { padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.</div>
</body>
</html>
Um den Code zu verkürzen, ist es möglich, alle Auffülleigenschaften in anzugeben eine Immobilie.
Die padding
-Eigenschaft ist eine Abkürzungseigenschaft für die folgende Person Polstereigenschaften:
padding-top
padding-right
padding-bottom
padding-left
So funktioniert es also:
Wenn die Eigenschaft padding
vier Werte hat:
padding: 25px 50px 75px 100px;
Die obere Polsterung beträgt 25 Pixel
Der rechte Abstand beträgt 50 Pixel
Die untere Polsterung beträgt 75 Pixel
Der linke Abstand beträgt 100 Pixel
Verwenden Sie die Abkürzungseigenschaft padding mit vier Werten:
div { padding: 25px 50px 75px 100px;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 25px 50px 75px 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The padding shorthand property - 4 values</h2>
<div>This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px, and a left padding of 100px.</div>
</body>
</html>
Wenn die Eigenschaft padding
drei Werte hat:
padding: 25px 50px 75px;
Die obere Polsterung beträgt 25 Pixel
Die rechte und linke Polsterung beträgt 50 Pixel
Die untere Polsterung beträgt 75 Pixel
Verwenden Sie die Kurzformeigenschaft padding mit drei Werten:
div { padding: 25px 50px 75px;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 25px 50px 75px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The padding shorthand property - 3 values</h2>
<div>This div element has a top padding of 25px, a right and left padding of 50px, and a bottom padding of 75px.</div>
</body>
</html>
Wenn die Eigenschaft padding
zwei Werte hat:
padding: 25px 50px;
Die obere und untere Polsterung beträgt 25 Pixel
Die rechte und linke Polsterung beträgt 50 Pixel
Verwenden Sie die Kurzschrifteigenschaft padding mit zwei Werten:
div { padding: 25px 50px;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 25px 50px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The padding shorthand property - 2 values</h2>
<div>This div element has a top and bottom padding of 25px, and a right and left padding of 50px.</div>
</body>
</html>
Wenn die Eigenschaft padding
einen Wert hat:
padding: 25px;
Alle vier Polsterungen sind 25 Pixel groß
Verwenden Sie die Kurzformeigenschaft padding mit einem Wert:
div { padding: 25px;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 25px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The padding shorthand property - 1 value</h2>
<div>This div element has a top, bottom, left, and right padding of 25px.</div>
</body>
</html>
Die CSS-Eigenschaft width
gibt die Breite des Inhaltsbereichs des Elements an. Der Der Inhaltsbereich ist der Teil innerhalb des Abstands, des Rahmens und des Rands eines Elements (das Boxmodell).
Wenn also ein Element eine bestimmte Breite hat, gilt dies auch für die diesem Element hinzugefügte Auffüllung zur Gesamtbreite des Elements addiert werden. Dies ist oft ein unerwünschtes Ergebnis.
Hier erhält das <div>-Element eine Breite von 300px. Die tatsächliche Breite des <div>-Elements beträgt jedoch 350 Pixel (300 Pixel +). 25 Pixel linke Polsterung + 25 Pixel rechte Polsterung):
div {
width: 300px;
padding: 25px;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 300px;
background-color: yellow;
}
div.ex2 {
width: 300px;
padding: 25px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Padding and element width</h2>
<div class="ex1">This div is 300px wide.</div>
<br>
<div class="ex2">The width of this div is 350px, even though it is defined as 300px in the CSS.</div>
</body>
</html>
Um die Breite unabhängig von der Füllmenge bei 300 Pixeln zu halten, können Sie verwenden box-sizing
-Eigenschaft. Dadurch behält das Element seine tatsächliche Breite bei; Wenn Wenn Sie den Abstand erhöhen, verringert sich der verfügbare Inhaltsraum.
Verwenden Sie die Box-Sizing-Eigenschaft, um die Breite unabhängig von der Größe bei 300 Pixeln zu halten Füllmenge:
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 300px;
background-color: yellow;
}
div.ex2 {
width: 300px;
padding: 25px;
box-sizing: border-box;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Padding and element width - with box-sizing</h2>
<div class="ex1">This div is 300px wide.</div>
<br>
<div class="ex2">The width of this div remains at 300px, in spite of the 50px of total left and right padding, because of the box-sizing: border-box property.
</div>
</body>
</html>
Stellen Sie die linke Polsterung ein
<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
padding-left: 2cm;
}
p.padding2 {
padding-left: 50%;
}
</style>
</head>
<body>
<h1>The padding-left Property</h1>
<p>This is a text with no left padding.</p>
<p class="padding">This text has a left padding of 2 cm.</p>
<p class="padding2">This text has a left padding of 50%.</p>
</body>
</html>
Dieses Beispiel zeigt, wie der linke Abstand eines <p>-Elements festgelegt wird.
Stellen Sie die richtige Polsterung ein
<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
padding-right: 2cm;
}
p.padding2 {
padding-right: 50%;
}
</style>
</head>
<body>
<h1>The padding-right Property</h1>
<p>This is a text with no right padding. This is a text with no right padding. This is a text with no right padding.</p>
<p class="padding">This text has a right padding of 2 cm. This text has a right padding of 2 cm. This text has a right padding of 2 cm.</p>
<p class="padding2">This text has a right padding of 50%. This text has a right padding of 50%. This text has a right padding of 50%.</p>
</body>
</html>
Dieses Beispiel zeigt, wie man den richtigen Abstand eines <p>-Elements festlegt.
Legen Sie die obere Polsterung fest
<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
padding-top: 2cm;
}
p.padding2 {
padding-top: 50%;
}
</style>
</head>
<body>
<h1>The padding-top Property</h1>
<p>This is a text with no top padding. This is a text with no top padding. This is a text with no top padding.</p>
<p class="padding">This text has a top padding of 2 cm. This text has a top padding of 2 cm. This text has a top padding of 2 cm.</p>
<p class="padding2">This text has a top padding of 50%. This text has a top padding of 50%. This text has a top padding of 50%.</p>
</body>
</html>
Dieses Beispiel zeigt, wie der obere Abstand eines <p>-Elements festgelegt wird.
Legen Sie die untere Polsterung fest
<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
padding-bottom:2cm;
}
p.padding2 {
padding-bottom:50%;
}
</style>
</head>
<body>
<h1>The padding-bottom Property</h1>
<p>This is a text with no bottom padding. This is a text with no bottom padding. This is a text with no bottom padding.</p>
<p class="padding">This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm.</p>
<p class="padding2">This text has a bottom padding of 50%. This text has a bottom padding of 50%. This text has a bottom padding of 50%.</p>
</body>
</html>
Dieses Beispiel zeigt, wie der untere Abstand eines <p>-Elements festgelegt wird.
Eine Abkürzungseigenschaft zum Festlegen aller Fülleigenschaften in einer Deklaration
Legt die untere Polsterung eines Elements fest
Legt den linken Abstand eines Elements fest
Legt den richtigen Abstand eines Elements fest
Legt die obere Polsterung eines Elements fest