art1
    
    
    

    

    Der zweite Artikel art2
    

    

    

    

    Der dritte Artikel art3
    

    

    
    
    Bild 14.14: Das padding-Beispiel im Browser
Erläuterung
    Analog zu den Eigenschaften der
margin
-Gruppe für den Außenabstand eines Elements stehen für Innenabstände wahlweise die Einzeleigenschaften
padding-left
(Abstand Elementinhalt zum linken Elementrand),
padding-right
(Abstand zum rechten Elementrand),
padding-top
(Abstand zum oberen Elementrand) und
padding-bottom
(Abstand zum unteren Elementrand) oder die zusammenfassende Eigenschaft
padding
zur Verfügung. Im obigen Beispiel kommt im zentralen
style
-Bereich dreimal die Einzeleigenschaft
padding
zum Einsatz und in den
h1
-Elementen im Dokumentkörper die zusammenfassende Eigenschaft
padding
.
    Alle Eigenschaften erwarten eine nummerische Angabe wie
30px
,
1em
oder
5mm
, oder – wie im obigen Beispiel die
h1
-Elemente – den Wert
0
.
    Bei
padding:
sind ein bis vier nummerische Angaben erlaubt.
•   Eine Angabe bedeutet: Alle vier Ränder des Elements erhalten den gleichen Innenabstand. Bei mehreren Angaben werden die Angaben intern nach der angenommenen Reihenfolge für 1=oben, 2=rechts, 3=unten, 4=links interpretiert.
•   Zwei Angaben bedeuten: Die erste Angabe bezeichnet den Innenabstand für oben und unten, die zweite den Innenabstand für rechts und links.
•   Drei Angaben bedeuten: Die erste Angabe bezeichnet den Innenabstand für oben, die zweite den Innenabstand für rechts und links und die dritte den Innenabstand für unten.
•   Vier Angaben bedeuten: Die erste Angabe bezeichnet den Innenabstand für oben, die zweite den Innenabstand für rechts, die dritte den Innenabstand für unten und die vierte den Innenabstand für links.
Referenzinformationen
    CSS-Eigenschaften
padding
,
    CSS-Eigenschaften
padding-left
,
    CSS-Eigenschaften
padding-right
,
    CSS-Eigenschaften
padding-top
,
    CSS-Eigenschaften
padding-bottom
:

14.6      Rahmen, Ecken und Konturen
    Es gibt in CSS zwei Arten von Rahmen: Die erste Sorte ist in CSS an Eigenschaften erkennbar, die mit
border-
beginnen. Diese Art von Rahmen – man könnte sie auch als Schmuckrahmen bezeichnen – erweitern dem Boxmodell des W3C zufolge den Erstreckungsraum eines Elements um die Dicke der Rahmen. Die andere Sorte sollte man eher als Funktionsrahmen bezeichnen. Es handelt sich dabei um CSS-Eigenschaften, beginnend mit
outline-
. Im Gegensatz zu
border
-Rahmen erweitern
outline
-Rahmen nicht den Erstreckungsraum eines Elements. Auch ist der Gestaltungsspielraum bei
outline
-Rahmen stärker eingeschränkt. Gedacht sind
outline
-Eigenschaften eher für dynamische Hervorhebungszwecke, z. B. um Suchtreffer in einem Dokument optisch hervorzuheben. Deshalb werden sie in CSS3 auch in der Spezifikation über User-Interface-CSS beschrieben, und nicht, wie
border-
, in der Spezifikation über Rahmen- und Hintergrundgestaltung.
    Bei Schmuckrahmen (
border
) gibt es folgende optischen Aspekte:
•   die Dicke des Rahmens (
border-width
),
•   die Art des Rahmens (
border-style
),
•   die Rahmenfarbe (
border-color
),
•   die Rahmenrundung (
border-radius
),
•   Rahmengrafiken (
border-image
) und
•   Rahmenschatten (
border-shadow
).
    Bei Funktionsrahmen (
outline
) sind es die folgenden Aspekte:
•   Dicke (
outline-width
),
•   Art (
outline-style
),
•   Farbe (
outline-color
) und
•   Abstand vom Elementinhalt zum Rahmen (
outline-offset
).
14.6.1    Schmuckrahmen (border)
    Wie auch bei anderen CSS-Eigenschaften haben Sie bei der Rahmengestaltung die Wahl zwischen Einzelangaben für bestimmte Rahmenseiten und Rahmenaspekte oder zusammenfassenden Angaben. Wegen der verschiedenen optischen Aspekte von Rahmen entsteht insgesamt eine Fülle von CSS-Einzeleigenschaften. Beschrieben werden hier zunächst einmal die seit CSS 1.0 bekannten Gestaltungsaspekte: Rahmendicke, Rahmenart und Rahmenfarbe.
•   
border-left-width
,
border-right-width
,
border-top-width
und
border-bottom-width
für die Dicke des Rahmens links, rechts, oben und unten.
•   
border-left-style
,
border-right-style
,
border-top-style
und
border-bottom-style
für die Art des Rahmens links, rechts, oben und