mozilla
Your Search Results

    padding

    Übersicht

    Die padding Eigenschaft ist eine Kurzform für die Innenabstände aller vier Seiten eines Elementes. Der Innenabstand ist der Bereich zwischen dem Inhalt und dem Rahmen (auch: padding area).

    • Standardwert: 0
    • Anwendbar auf: alle Elemente außer table-*-group, table-row und table-column
    • Vererbbar: Nein
    • Prozentwerte: beziehen sich auf die Breite des umschließenden Blocks.
    • Medium: visuell
    • berechneter Wert: siehe einzelne Eigenschaften

    Syntax

    padding:   [ <Längenangabe> | <Prozentzahl> ] {1,4} | inherit

    Werte

    Es werden bis zu vier der folgenden Werte akzeptiert:

    <Längenangabe>
    Legt eine bestimmte Länge fest. Negative Werte sind nicht erlaubt.
    <Prozentzahl>
    Ein prozentualer Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte nicht sind erlaubt.
    inherit
    Der Wert des Elternelements wird geerbt.
    Ein Wert
    Gilt für alle vier Seiten.
    Zwei Werte
    Der erste Wert bestimmt die oberen und unteren Abstände, der zweite Wert legt die Abstände rechts und links fest.
    Drei Werte
    Der erste Wert bestimmt den oberen Abstand, der zweite Wert legt die Abstände für rechts und links zusammen fest und der dritte Wert bestimmt den unteren Abstand.
    Vier Werte
    Für jede Seite können die Abstände einzeln festgelegt werden. In der Reihenfolge: oben, rechts, unten, links.

    Beispiele

    padding: 5%;                /* 5% Abstand auf allen Seiten */
    
    padding: 10px;              /* 10px Abstand auf allen Seiten */
    
    padding: 10px 20px;         /* oben und unten 10px */
                                /* links und rechts 20px */
    
    padding: 10px 3% 20px;      /* oben 10px */
                                /* links und rechts 3% */
                                /* unten 20px */
    
    padding: 1em 3px 30px 5px;  /* oben 1em */
                                /* rechts 3px */
                                /* unten 30px */
                                /* links 5px */
    

    border:outset; padding:5% 1em;

    Livebeispiel

    HTML Inhalt

    <h4>Hallo Welt!</h4>
    <h3>Der Innenabstand ist in dieser Zeile anders.</h3>

    CSS Inhalt

    h4 {
      background-color: green;
      padding: 50px 20px 20px 50px;
    }
    
    h3{
      background-color: blue;
      padding: 400px 50px 50px 400px;
    }

    Spezifikationen

    Spezifikation Status Kommentar
    CSS Basic Box Model
    Die Definition von 'padding' in dieser Spezifikation.
    Arbeitsentwurf keine Änderung
    CSS Level 2 (Revision 1)
    Die Definition von 'padding-top' in dieser Spezifikation.
    Empfehlung keine Änderung
    CSS Level 1
    Die Definition von 'padding' in dieser Spezifikation.
    Empfehlung Ursprüngliche Definition

    Browserkompatiblität

    Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Grundlegende Unterstützung 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
    Merkmal Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Grundlegende Unterstützung ? ? ? ? ?

    Siehe auch

    Document Tags and Contributors

    Contributors to this page: fscholz, Yuichiro, Jürgen Jeka, Sebastianz, Michael2402, SJW
    Last updated by: Sebastianz,