Wie wir bereits beim Box-Modell sehen konnten, ist der Innenabstand der Bereich gerade außerhalb des Inhaltsbereichs und auf der inneren Seite des Rahmenbereichs. Eine Box hat vier Seiten. Wir können also Innenabstände für die 4 Seiten, und auch eine allgemeine Innenabstandeigenschaft definieren.
padding-top
padding-right
padding-bottom
padding-left
Es gibt eine fünfte Eigenschaft, padding, die als Kurzbezeichnung für die oben genannten Eigenschaften benutzt werden kann.
Innenabstände können über 3 Wege festgelegt werden: Länge, Prozentangabe, oder automatisch. Schauen wir uns ein Beispiel an:
|
#container {
padding-top:15px;
padding-left:5px;
padding-right:30px;
padding-bottom:40px;
border: 1px solid 000000;
}
|
Der folgende HTML-Code:
|
<div id="container">
Dies ist ein Beispiel für Innenabstände
</div>
|
würde so aussehen:
|
Dies ist ein Beispiel für Innenabstände
|
Beachten Sie, dass der Innenabstand zwischen der Box und der oberen, linken, unteren und rechten Seite des hellgrünen Bereiches 15px, 5px, 40px und 30px ist.
Kurzbezeichnungen für Innenabstände
Alle vier Außenabstände können mit der "padding"-Eigenschaft über eine einzelne Zeile bestimmt werden. Der Syntax hierfür ist wiefolgt:
padding: [padding-top] [padding-right] [padding-bottom] [padding-left]
Die Reihenfolge ist hier sehr wichtig. Das erste Element ist immer der obere Innenabstand, das zweite der rechte Innenabstand, das dritte der untere Innenabstand und das vierte ist der linke Innenabstand.
Folgende Seite: CSS Background
Copyright 2008-2009 1keydata.com Alle Rechte vorbehalten.
|
|