CSS-Padding


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Mit Padding wird um den Inhalt eines Elements innerhalb definierter Ränder Platz geschaffen.


This element has a padding of 70px.

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>



CSS-Padding

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).


Polsterung - einzelne Seiten

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.

Beispiel

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>




Polsterung - Abkürzungseigenschaft

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

Beispiel

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

Beispiel

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

Beispiel

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ß

Beispiel

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>



Polsterung und Elementbreite

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.

Beispiel

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.

Beispiel

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>



Mehr Beispiele

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.



Alle CSS-Padding-Eigenschaften

padding

Eine Abkürzungseigenschaft zum Festlegen aller Fülleigenschaften in einer Deklaration

padding-bottom

Legt die untere Polsterung eines Elements fest

padding-left

Legt den linken Abstand eines Elements fest

padding-right

Legt den richtigen Abstand eines Elements fest

padding-top

Legt die obere Polsterung eines Elements fest