11.2.4.4) 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:

(© 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: Eigenschaften für Rahmen, Eigenschaften für Innenabstand, 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). 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Boxmodell</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* <![CDATA[ */
body {
   background-color:#FFF5E6;
   color: #995C00;
   margin: 0;
   padding: 0;
   font: 100.01% sans-serif;
}
#box {
   width:20em;
   background-color:#FFC266;
   border: 3em solid #FF9900;
   padding: 4em;
   margin: 2em;
}
#inhalt {
   background-color:#FFF5E6;
   font-size: 3em;
}
/* ]]> */
</style>
</head>
<body>
<div id="box">
  <div id="inhalt">Inhaltsbereich</div>
</div>
 
</body>
</html>