Rahmen mit Holzknöpfen

CSS - Das Boxmodell


Autoren: A. Grella, D. Supper, Elektronikschule Tettnang.

Mit dem Boxmodell werden alle Flächen einer Internetseite definiert. Auch wenn häufig nicht alle Möglichkeiten und Bereiche des Modells ausgenutzt werden, stellt es ein Design für alle Möglichkeiten zur Verfügung.

In diesem Artikel wird das Boxmodell erklärt. Dabei werden die Bedeutung von content, padding, border und margin erklärt und deren Manipulationsmöglichkeiten aufgezeigt. Dies wird auf Layoutbereiche als auch auf Tabellen und Grafiken angewandt.

Das Boxmodell content - padding - border - margin

CSS-Box
Abb. 1: CSS-Box mit Content, Padding, Border und Margin

Auf dem Boxmodell basieren die Flächen aller Bereiche einer Internet­seite. Jede Fläche ist rechteckig und hat einen Inhalt (engl. content). Um den Inhalt befindet sich ein Innenabstand (engl. padding) gleicher Farbe. Darum befindet sich eine Rahmenlinie (engl. border) und der Außenabstand (engl. margin).

Man beachte, dass nur die Hintergrund­farbe des Inhaltsbereichs (hier blau) und der Rahmenlinie (hier schwarz) festgelegt werden können.

Der Innenabstand trägt immer die identische Farbe wie der Inhaltsbereich wurde aber hier zum Sichtbarmachen grün markiert. Der Außenabstand trägt immer die Farbe der Umgebung (hier weiß).

content - padding - border - margin

Der Inhaltsbereich content
In diesem Bereich lässt sich Breite, Höhe, Hintergrundfarbe und Schriftfarbe steuern. Wird die Breite und Höhe nicht angeben ist die Fläche so groß wie deren Inhalt benötigt.

Der Innenabstand padding
definiert den Abstand vom Inhaltsbereich bis zum Rahmen. Dabei wird vom Inhaltsbereich die Hintergrund­farbe über­nommen.

Die Rahmenlinie border
ermöglicht einen Rahmen um den Inhaltsbereich (inkl. Innenabstand). Neben der Breite und Farbe lässt sich noch die Linienart einstellen. Man beachte, dass in den meisten Anwendungs­fällen kein Rahmen verwendet wird.

Der Außenabstand margin
ist der Abstand um die Rahmenlinie. Die Hintergrundfarbe wird von der Umgebung übernommen. Hierbei sind auch negative Werte zulässig. In der Praxis gibt es für padding und margin Voreinstellungen die man mit dem Selektor body zurücksetzt.

.theme1 {
  /*content*/
  width: 50%;
  height: auto;
  background-color: black;
  color: white;

  /*padding: top right bottom left*/
  padding: 10px 20px 30px 40px;

  /*border: width style color*/
  border: 10px solid black;

  /*margin: alle Seiten gleicher Wert*/
  margin: 10px;
}

Anpassen der Bildgröße und Hintergrund­grafik

/*Bildgröße*/
img {
  width: 100%;
  height: auto;
}

/*Hintergrundgrafik*/
body {
  background-image: #8c8c8c url('bild.png') fixed repeat left top;
}

Anpassen der Bildgröße
Um die Bildgröße anzupassen, lässt sich deren Breite und Höhe einstellen. Lässt man die Höhe automatisch anpassen und stellt die Breite auf 100% passt die Grafik sich automatisch der Bildschirmbreite an (engl. responsive web design). Möchte man aufgrund der geringen Auflösung die Breite begrenzen kann man als Eigenschaft auch max-width: 100%; angeben.

Hintergrundgrafik
In CSS kann man auch ein Hintergrundbild wählen. Neben einer Hintergrundfarbe und Pfad, werden noch weitere Eigenschaften festgelegt. Man sollte dabei allerdings beachten, dass man in der Praxis für unterschiedliche Endgeräte verschiedene Grafiken hinterlegen muss um eine einwandfreie Darstellung zu gewähr­leisten.

Tabellen forma­tieren

Tabellen können mit den Selektoren table, thead, tbody, td u.s.w. formatiert werden.

Häufig verwendete Eigenschaften sind:
padding Innenabstand in der Zelle
text-align horizontale Text­ausrichtungh
vertical-align vertikale Text­ausrichtung
border-top Einstellung der Rahmenstärke, Stil und Farbe
background-color Hintergrundfarbe der Zelle

Hover-Tabellen
Der Hover-Effekt lässt sich mit der Pseudo­klasse auch auf Tabellen anwenden:
td:hover jede Zelle
tr:hover jede Reihe

/*Abstand zwischen Zellen*/
table {
  border-spacing: 1px;
}

/*Zellen*/
table tr td, table tr th {
  padding: 5px;
  vertical-align: middle;
  border-top: 1px solid black;
}

/*Pseudoklassen*/
table tr td:hover {
  background-color: grey;
}

Entspann dich erst mal ...



Passend zu St. Martin. Einfach lustig ...

Übung 1 Das Boxmodell

Formatiere Deine Internetseite.

Internetseite mit CSS-Formatierung
  1. Setze den margin für den Selektor body auf Null.
  2. Setze den margin für den Bildbereich auf Null.
  3. Gestalte das Bild responsiv. Setze dazu die Breite auf 100% und die Höhe auf auto.
  4. Wähle für die Klasse .lightmode sowie .darkmodefolgende Einstellung: margin: 0px; und padding: 20px 50px 20px 50px;, so dass alle Randbereiche eine einheitliche Farbe haben.
  5. Formatiere die Tabelle.
.lightmode {
  background-color: ...;
  color: ...;
  margin: 0px;
  padding: 20px 50px 20px 50px;
}

img {
  width: ...;
  height: ...;
}

Übung 2 Welche Aussage ist wahr?

Wähle die korrekten Aussagen aus.

Nenne die zwei korrekt notierten Bereiche einer Fläche im Boxmodell.
Wähle zwei Antworten.

  1. content
  2. pading
  3. border
  4. marchin


Nenne die zwei Bereiche im Boxmodell deren Farbe nicht einstellbar ist.
Wähle zwei Antworten.

  1. content
  2. padding
  3. margin
  4. border



Der Innenabstand soll korrekt programmiert werden.
Wähle eine Antwort.

  1. padding: 10px 10px 10px 10px;
  2. padding: 10 10 10 10;
  3. padding: 10px 10px 10px
  4. margin: 10px;


Gib die Gesamtbreite einer Box an.
Wähle eine Antwort.

  1. height + padding + border + margin
  2. padding + margin
  3. width
  4. width + padding + border + margin


Eine Anwenderin möchte folgende Tabelle:

NameVorname

Sie programmiert:
table tr td {
   padding: 5px;
   vertical-align: middle;
   border-top: 1px solid black;
}
Nenne die Anzahl der Fehler. Wähle eine Antwort.

  1. null
  2. eins
  3. zwei
  4. drei


Ein Anwender möchte folgende Tabelle:

NameVorname

Er programmiert:
table tr td {
   padding: 100%;
   background-color: solid;
   border-top: 1px dashed #AAAAAA;
}
Nenne die Anzahl der Fehler. Wähle eine Antwort.

  1. null
  2. eins
  3. zwei
  4. drei

Wortliste und Satzbausteine



das Box­modell, -e Basis für die rechteck­igen Flächen einer jeden Internetseite. Jede Fläche hat einen Inhalts­bereich (engl. content), einen Innen­abstand (engl. padding), eine Rahmen­linie (engl. border) und einen Außen­abstand (engl. margin.
content der Inhalts­bereich, die Fläche des Inhalts
padding der Innen­ab­stand ist die Distanz zwischen Inhalt und Rahmen
border die Rah­men­linie, ein Rahmen um den Inhalts­bereich
margin der Aussen­ab­stand, Abstand um die Rahmen­linie
die Ge­samt­breite, -n = width + padding + border + margin
die Ge­samt­breite, -n = height + padding + border + margin