HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum |
 

 
 

Anzeige 
 
               Forum
 
 
HTMLWorld » CSS » Box-Eigenschaften

CSS: Box-Eigenschaften

von Jan Winkler

CSS definiert für jedes Element des Element-Baumes eine Box. Vereinfacht vorgestellt könnte man sich diese Box wie ein Bild vorstellen. Das Element selbst ist das (gemalte) Bild. Um dieses Bild/Element herum wird (meist) ein Rahmen (engl. Border) gezogen. Zwischen Bild und Rahmen wird der Padding- oder Auffüllbereich gesetzt. Er dient z.B. dazu, dass der Rahmen nicht direkt am Bild "hängt". Um den Rahmen wiederum wird Bereich definiert, der sich Margin- oder Begrenzungsbereich nennt. Er dient dazu, dass andere Bilder/Elemente einen gewissen Mindestabstand zu unserem Bild haben müssen. Die folgende Grafik soll dies nochmals verdeutlichen:

Anzeige

Box-Modell
Darstellung: Box-Modell

Unser Bild kann nun (fast) jedes beliebige Element sein z.B. Text (p) oder eine Tabelle (table) oder ein anderes Element (ausgenommen head und frameset; Einschränkungen bei frame, iframe und body). Somit ist es möglich (fast) jedem Element einen Rahmen oder einen Mindestabstand zu definieren.

CSS Level 1 padding-top, padding-bottom, padding-left und padding-right  nach oben

Die padding-top- und padding-bottom-Eigenschaften beschreiben den vertikalen Auffüllbereich. padding-top beschreibt den Abstand des Elementinhalts zum oberen Rahmen (Border); padding-bottom beschreibt ihn zum unteren Rahmen.

Die padding-left- und padding-right-Eigenschaften werden zum horizontalen Beschreiben des Auffüllbereiches verwendet. padding-left beschreibt den Abstand des Elementinhalts zum linken Rahmen (Border); padding-right zum rechten Rahmen. Die folgende Grafik soll diese Eigenschaften nochmals verdeutlichen:

padding-left-, -top-, -right- und -bottom-Eigenschaften
Darstellung: padding-left-, -top-, -right- und -bottom-Eigenschaften

Als Werte können dabei Prozentangaben oder Längenangaben notiert werden. Prozentangaben beschreiben die Höhe bzw. Breite des Padding-Bereiches in Prozent der Box-Höhe bzw. Box-Breite (vom oberen Rahmen bis zum unteren Rahmen bzw. vom rechten Rahmen bis zum linken Rahmen). Längenangaben beschreiben den Abstand in einer fest definierten Länge. Beispiel:

TD { padding-top:25%; padding-left:30px; padding-bottom:50px; }
BODY { padding-right:10%; } 

CSS Level 1 padding  nach oben

Die padding-Eigenschaft ist ein Zusammenschluss der 4 oben genannten Eigenschaften padding-right, -left, -bottom und -top. Sie dient dazu langes Geschreibe zu verkürzen, indem die vier langen Eigenschaften durch eine einfacherere ersetzt werden. Als Wert notiert man dazu ein bis vier Werte der o.g. Eigenschaften. Wird nur ein Wert notiert, so gilt dieser für alle vier Eigenschaften. Werden zwei Werte definiert, so gilt der erste für die padding-top und padding-bottom-Eigenschaft und der zweite für die beiden anderen. Werden drei Werte notiert, so gilt der erste für die padding-top-Eigenschaft, der zweite für padding-left und -right und der dritte für padding-bottom. Bei vier definierten Werten ist die Reihenfolge padding-top, -right, -bottom und -left. Alle Werte werden durch Leerzeichen getrennt. Beispiel:

P { padding: 20px 40px 13% 14%; }
DIV { padding: 5%; } 

CSS Level 1 margin-top, margin-bottom, margin-left und margin-right  nach oben

Die Eigenschaften margin-top und margin-bottom beschreiben die vertiakle Begrenzung des Elementes. Diese Begrenzung ist der Mindestabstand den ein anderes Element haben muss, welches sich direkt neben diesem befindet. Die margin-top-Eigenschaft bescheibt dabei die obere Begrenzung, also den Abstand nach oben. Die margin-bottom-Eigenschaft tut das Gleiche nach unten.

Die margin-left und margin-right Eigenschaften sind zum definieren der horizontalen Begrenzung eines Elements da. Auch hier ist diese Begrenzung der Mindestabstand, den ein anderes Element haben muss. Die margin-left-Eigenschaft bescheibt dabei die linke Begrenzung. Die margin-right-Eigenschaft beschreibt das Gleiche nach rechts. Die folgende Grafik soll dies nochmals verdeutlichen:

margin-left-, -top-, -right- und -bottom-Eigenschaft
Darstellung: margin-left-, -top-, -right- und -bottom-Eigenschaft

Als Werte können hierbei die folgenden gelten:

  • Längenangabe - Beschreibt den exakten Abstand der Elemente in der jeweiligen Einheit.
  • Prozentangabe - Beschreibt den Abstand der Elemente in Prozent zur Fensterhöhe.
  • auto - Beschreibt den Außenabstand als automatisch berechnet. Dabei wird nach Priorität und Gewichtung der Elemente zueinander der Außenabstand berechnet.

Beispiel:

BODY { margin-top:10px; margin-bottom:auto; }
BLOCKQUOTE { margin-left:15%; margin-right:15%; } 

CSS Level 1 margin  nach oben

Die margin-Eigenschaft fasst die Werte der vier oben genannten margin-Eigenschaften zusammen. Dies dient der Verkürzung und somit Vereinfachung des Quelltextes. Als Werte können ein bis vier der für die o.g. Eigenschaften gültigen Werte notiert werden. Wird ein Wert notiert, so gilt dieser für alle vier Eigenschaften. Werden zwei Werte notiert, so gilt der erste für die margin-top- und die margin-bottom-Eigenschaft und der zweite für die verbleibenden zwei Eigenschaften. Werden drei Werte notiert, so gilt der erste für die margin-top-, der zweite für die margin-right- sowie margin-left- und der dritte für die margin-bottom-Eigenschaft. Werden vier Werte notiert, so ist die Anordnung in ihrer Reihenfolge: margin-top margin-right margin-bottom und letztlich margin-left. Mehrere Werte werden durch Leerzeichen voneinander getrennt. Beispiel:

BODY { margin: 10px 10px; }
TABLE { margin: 5% 5% 4% 4%; } 

Berechnung von Außenabständen  nach oben

Die Berechnung der Außenabstände zweier oder mehrerer Elemente richtet sich nach der Art/dem Typ des jeweiligen Elements. Dabei ist es so, dass wichtigere Elemente andere unwichtigere Elemente verdrängen, verschieben und/oder überlagern können. Die Rangfolge der Wichtigkeit eines Elements ist wie folgt festgelegt (vom unwichtigsten zum wichtigsten):

  • Inline-Elemente die nicht-ersetzend sind
  • Inline-Elemente die ersetzend sind
  • Block-Elemente die nicht-ersetzend sind und normalen Textfluss haben
  • Block-Elemente die ersetzend sind und normalen Textfluss haben
  • Elemente die als fließend definiert und nicht-ersetzend sind
  • Elemente die als fließend definiert und ersetzend sind
  • Absolut positionierte Elemente die nicht-ersetzend sind
  • Absolut positionierte Elemente die ersetzend sind

Als Beispiel: Sie definieren den Außenabstand zweier Elemente mit dem Wert 100px. Element X ist ein absolut positioniertes Element, Element Y ist ein normales Element. Würden nun beispielsweise diese beiden Elemente in die Lage kommen, dass sich die Außenbereiche treffen oder schneiden würden, so wird das Element mit der geringeren Wichtigkeit (Y) soweit verschoben, bis das wichtigere Element (X) erstens an seinem definierten Platz steht und zweitens das andere Element nicht mehr schneidet.



« zurück weiter »
Bewerten

 

CSS

.Autor:Jan Winkler.
. Bewertung:
CSS: Box-Eigenschaften HTMLWorld
(5/5 bei 1 Votes)
.
. Community: 450 Beiträge im CSS Forum .

Navigation

Images verschiedener Größe gleich anpassen von Alphavader
Seite verzerrt bei anderen Auflösungen. von Gorgomir
img Stretcher auf fluid Div Container von Thunder1985
Dropdown Menu unter den header von Harburger1887
Kreis um Buchstabe... von karinsch
footer unten platzieren von Alex...
css-anfaengerin - schreibschutz von css-tempate entfernen von kiloberta
Programmierer in Festanstellung oder Freiberuflich gesucht von GP.1226
Button Formatierungs Problem mit Transparentem Hintergrund von redlin
Runde Ecken IE 8 / ohne JavaScript und BG Bilder? von kamikaetzelein
3 Div Elemente ausrichten von Kanikkl
Bilder werden nur im IE angezeigt von Schmido
Contentinhalt vor Linkstruktur im Seitenquelltext von tbtip
Browserunterschiede in Darstellung von CrazyPlaya
Wie sollte ich das aufbauen? von Reelay

zum CSS Forum »


 
     
 

Anzeige