Kategorien
Stylesheets Webentwicklung

Das CSS Box Model – Quick Start

Mit dem Box Model wird festgelegt welche CSS Angaben zur Bestimmung der Größe einer HTML Box relevant sind.

Mit dem Box Model wird festgelegt welche CSS Angaben zur Bestimmung der Größe einer HTML Box relevant sind.

Wir haben einmal den Inhalt einer Box, bestimmt durch width und height.

Dazu kommen Werte für den Innenabstand, Rahmen und Außenabstand. Ich denke das schafft die meiste Verwirrung.
Aus dem Grund habe ich das noch einmal grafisch dargestellt.

Der äußere schwarze Rand stellt die gesamte Box dar.

Das Box Model in CSS
Das Box Model in CSS

Ein Festlegung von:

.meinebox {
width: 100px;
height: 50px;
padding: 10px;
border: 5px;
margin: 10px;
}

erzeugt einen effektive Breite der definierten Box von 150px.

Padding, Border und Margin gelten sowohl für rechts als auch für links.

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert