====== Boxen und Boxmodell ====== Wie bereits erwähnt unterscheidet man Block-Elemente und Inline-Elemente. Block-Elemente verwenden zur Darstellung das Boxmodell. Eine Box (also ein Block-Element) hat immer einen Innenabstand (padding), der zwischen Inhalt und dem Rahmen ist, einen Rahmen (border) und einen Außenabstand (margin), der den Abstand rund um den Rahmen angibt. **Grafische Darstellung des Boxmodells:** {{:inf:inf7b_201011:box1.gif|}} (© css4you.de) ==== CSS-Eigenschaften ==== ^ Eigenschaft ^ Wert ^ Erklärung ^ | padding | Größenangabe| Innenabstand | | margin | Größenangabe | Außenabstand | | border-color | HEX-Code oder Farbbezeichnung | Farbe des Rahmens | | border-width | Größenangabe | Breite des Rahmens | | border-style | none, dotted, dashed, solid, double, groove, ridge, inset, outset | Style des Borders | Es ist auch möglich, eine Rahmen- oder Abstandseigenschaft nur einer Seite der Box zuzuweisen; weitere Informationen dazu und allgemein zu den Rahmen-Eigenschaften gibt es wie immer auf CSS4You: [[http://www.css4you.de/borderproperty.html|Eigenschaften für Rahmen]], [[http://www.css4you.de/paddingproperty.html|Eigenschaften für Innenabstand]], [[http://www.css4you.de/marginproperty.html|Eigenschaften für Außenabstand]] Umfangreiche Informationen zu Boxen und dem Boxmodell findet man unter [[http://www.css4you.de/wsboxmodell/index.html]]. ===== Beispiel ===== Die DIV-Box hat einen Innenabstand, Außenabstand und einen Rahmen. Innerhalb dieser DIV-Box gibt es eine weitere DIV-Box die den Text beinhaltet. Die äußere DIV-Box muss ein Block-Element sein, die innere hätte auch ein Inline-Element sein können (z.B. span). Boxmodell
Inhaltsbereich
 ===== Links ===== * [[http://www.css4you.de/wsboxmodell/index.html|CSS4You: Informationen über das Boxmodell]] * [[http://www.css4you.de/borderproperty.html|CSS4You: Eigenschaften für Rahmen]] * [[http://www.css4you.de/marginproperty.html|CSS4You: Eigenschaften für Außenabstand]] * [[http://www.css4you.de/paddingproperty.html|CSS4You: Eigenschaften für Innenabstand]]