Webdesign, Tutorials und mehr - Webmasterpro.de

padding: Innenabstand

Mit der CSS Eigenschaft padding kann der Innenabstand von Elementen (zwischen Inhalt und dem Rahmen des Elements) gesetzt werden.

Übersicht über Innenabstand, Rahmen und Außenabstand

Speziellere Eigenschaften

Neben der Eigenschaft padding existieren noch vier weitere Eigenschaften für sämtliche Seiten. Diese sind in der folgenden Tabelle aufgelistet:

Kurzschreibweise

Um CSS möglichst effizient zu gestalten, sollte beispielsweise anstelle von vier einzelnen Definitionen der einzelnen Seiten die Kurzschreibweise padding mit 4 Werten benutzt werden. Mehr dazu im Abschnitt Werte.

Werte

Die Werte können unterschiedlich angegeben werden.
Entweder für alle Seiten gleich, für jede Seite einzeln, oben und unten gleich und rechts und links gleich oder für rechts und links gleich aber für oben und unten unterschiedlich

Beispiele

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<style type="text/css">
    p {
        padding: 1em;
        border: solid; 
    }
</style>
<p>
    Dieser Absatz hat einen Rahmen. Damit dieser aber nicht direkt am Text 
    klebt hat er auch noch einen Innenabstand.
</p>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

<style type="text/css">
    table thead tr td
    {
        padding:        3px 10px;
    }
    table tbody tr td
    {
        padding:        5px;
    }
</style>
<table>
    <thead>
        <tr>
            <td>Spalte 1</td><td>Spalte 2</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td><td>2</td>
        </tr>
    </tbody>
</table>

Weiterführende Links

• Darstellung und Abstände
• Das CSS Boxmodel

Kommentare: padding: Innenabstand