CSS/Eigenschaften/Abstand/padding

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Innenabstand (padding, englisch: Polsterung) ist ein erzwungener Leerraum zwischen dem Inhalt eines Elements und seinem eigenen Elementrand, also z.B. zwischen dem Text eines Elements und dem Rand dieses Elements.

Inhaltsverzeichnis

[Bearbeiten] Allgemeines

Empfehlung: Zum besseren Verständnis wird das Studium des Artikels zum Box-Modell empfohlen.

Darstellung des CSS Box-Modells

Sinnvoll sind die hier beschriebenen CSS-Eigenschaften für alle HTML-Elemente, die einen eigenen Absatz erzeugen bzw. einen Block bilden, also etwa für h[1-6], p, blockquote, div, address oder pre. Sinnvoll sind die Angaben zum Innenabstand ferner, wenn Sie außerdem CSS-Eigenschaften für Rahmen oder für Farben oder Grafiken zum Hintergrund eines Elements notieren. Denn erst dann werden die Abstände zwischen Elementgrenze und Elementinhalt richtig sichtbar. Sinnvoll sind die hier beschriebenen Eigenschaften daher auch für die Zellenelemente td von HTML-Tabellen.

Beachten Sie, dass die Grafik Breite und Höhe lediglich für den Fall darstellt, dass die Eigenschaft box-sizing den Wert content-box hat oder nicht gesetzt ist.

[Bearbeiten] padding-top (Innenabstand oben)

Mit dieser Eigenschaft können Sie den Zwischenraum zwischen Elementinhalt und oberer Elementgrenze (sichtbar bei Rahmen, Farben usw.) bestimmen. Erlaubt ist ein numerisches Längenmaß, das aber nicht negativ sein darf.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 1.0
Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>padding-top</title>
    <style>
      p { width: 30em; padding-top: 100px; border: 1px solid red; }
    </style>
  </head>
  <body>
    <p>... Textabsatz mit 100 Pixel Innenabstand nach oben ...</p>
  </body>
</html>

[Bearbeiten] padding-right (Innenabstand rechts)

Mit dieser Eigenschaft können Sie den Zwischenraum zwischen Elementinhalt und rechter Elementgrenze (sichtbar bei Rahmen, Farben usw.) bestimmen. Erlaubt ist ein numerisches Längenmaß, das aber nicht negativ sein darf.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 1.0
Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>padding-right</title>
    <style>
      p { width: 30em; padding-right: 100px; border: 1px solid red; }
    </style>
  </head>
  <body>
    <p>... Textabsatz mit 100 Pixel Innenabstand nach rechts ...</p>
  </body>
</html>

[Bearbeiten] padding-bottom (Innenabstand unten)

Mit dieser Eigenschaft können Sie den Zwischenraum zwischen Elementinhalt und unterer Elementgrenze (sichtbar bei Rahmen, Farben usw.) bestimmen. Erlaubt ist ein numerisches Längenmaß, das aber nicht negativ sein darf.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 1.0
Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>padding-bottom</title>
    <style>
      p { width: 30em; padding-bottom: 100px; border: 1px solid red; }
    </style>
  </head>
  <body>
    <p>... Textabsatz mit 100 Pixel Innenabstand nach unten ...</p>
  </body>
</html>

[Bearbeiten] padding-left (Innenabstand links)

Mit dieser Eigenschaft können Sie den Zwischenraum zwischen Elementinhalt und linker Elementgrenze (sichtbar bei Rahmen, Farben usw.) bestimmen. Erlaubt ist ein numerisches Längenmaß, das aber nicht negativ sein darf.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 1.0
Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>padding-left</title>
    <style>
      p { width: 30em; padding-left: 100px; border: 1px solid red; }
    </style>
  </head>
  <body>
    <p>... Textabsatz mit 100 Pixel Innenabstand nach links ...</p>
  </body>
</html>

[Bearbeiten] padding (Innenabstand allgemein)

Diese Angabe ist eine Zusammenfassung der möglichen Einzelangaben padding-top, padding-right, padding-bottom und padding-left. Solcherart Eigenschaften bezeichnet man auch als zusammenfassende Eigenschaften (shorthand properties).

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 1.0
Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>padding</title>
    <style>
      p { display: table; }
      .typA { padding: 1cm;             border: 1px solid red }
      .typB { padding: 1cm 2cm;         background-color: #dddddd }
      .typC { padding: 1cm 2cm 3cm;     border: 1px solid red }
      .typD { padding: 1cm 2cm 3cm 4cm; background-color: #dddddd }
    </style>
  </head>
  <body>
    <h1>Verwendung von <code>padding</code></h1>
    <p class="typA">typA mit padding: 1cm</p>
    <p class="typB">typB mit padding: 1cm 2cm</p>
    <p class="typC">typC mit padding: 1cm 2cm 3cm</p>
    <p class="typD">typD mit padding: 1cm 2cm 3cm 4cm</p>
  </body>
</html>
In diesem Beispiel wurden die Textabsätze mit display:table daran gehindert, jedes Mal die volle zur Verfügung stehende Breite des Elternelements zu belegen und stattdessen nur so breit wie für den Textinhalt notwendig zu sein. Dies ist notwendig, damit der Innenabstand nach rechts deutlich sichtbar ist. Man hätte zwar gleich Tabellen dafür verwenden können, das wäre aber aus semantischer Sicht hier nicht sinnvoll. Erstellen Sie semantisch sinnvollen Code.

Mit padding können Sie den Abstand für oben, rechts, unten und links bestimmen. Erlaubt sind ein bis vier nicht negative numerische Längenmaße sowie die Werte auto oder inherit.

  • Eine Angabe: für alle 4 Abstände gilt derselbe Wert
  • Zwei Angaben: 1. Wert für padding-top und padding-bottom, 2. Wert für padding-left und padding-right
  • Drei Angaben: 1. Wert für padding-top, 2. Wert für padding-left und padding-right, 3. Wert für padding-bottom
  • Vier Angaben: 1. Wert für padding-top, 2. Wert für padding-right, 3. Wert für padding-bottom, 4. Wert für padding-left (Merkhilfe: Uhrzeigerbewegung)
Beachten Sie: Die Werte werden durch Leerzeichen, nicht durch Kommata getrennt.

[Bearbeiten] Siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML