CSS -Box-Modell
Alle HTML-Elemente können als Boxen betrachtet werden.
Das CSS-Box-Modell
In CSS wird der Begriff „Box-Modell“ verwendet, wenn es um Design und Layout geht.
Das CSS-Box-Modell ist im Wesentlichen eine Box, die jedes HTML-Element umschließt. Es besteht aus: Margins, Borders, Padding und dem eigentlichen Inhalt. Das folgende Bild zeigt das Box-Modell:
Erklärung der verschiedenen Teile:
- Inhalt – Der Inhalt der Box, in der Text und Bilder erscheinen
- Padding - Löscht einen Bereich um den Inhalt herum. Die Polsterung ist transparent
- Rahmen - Ein Rahmen, der die Füllung und den Inhalt umgibt
- Rand - Löscht einen Bereich außerhalb der Grenze. Der Rand ist transparent
Das Box-Modell ermöglicht es uns, einen Rahmen um Elemente hinzuzufügen und den Abstand zwischen Elementen zu definieren.
Beispiel
Demonstration des Kastenmodells:
div {
width: 300px;
border: 15px solid
green;
padding: 50px;
margin: 20px;
}
Breite und Höhe eines Elements
In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.
Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins.
Example
This <div> element will have a total width of 350px:
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
Here is the calculation:
The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin