Alle HTML-Elemente kann man als Box-Modell betrachten.
Das CSS-Boxmodell ist eine wichtige Box die umschliesst jedes HTML-Element.
Es beinhaltet: margins(Ränder), borders(Grenzen), padding(Polsterung) und den aktuellen Inhalt.
Das Bild unten ilustriert das Boxmodell:
Inhalt, wo Text und Bilder erscheinen.
padding, das Padding ist transparent.
border, sichtbarer Rahmen.
margin, das Margin ist transparent.
Hier die Berechnung für das Beispiel unten:
300px (width)
+ 100px (left + right padding)
+ 30px (left + right border)
+ 40px (left + right margin)
= 470px
<!DOCTYPE html>
<html>
<head>
<style>
main {
background-color: dodgerblue;
width: 300px;
border: 15px solid orange;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Das Boxmodell wird hier demonstriert</h2>
<p>Das CSS-Boxmodell ist eine wichtige Box die umschliesst jedes HTML-Element.<br>
Es beinhaltet: margins(Ränder), borders(Grenzen), padding(Polsterung) und den aktuellen Inhalt.</p>
<main>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</main>
