Model skrzynki CSS
Wszystkie elementy HTML można traktować jako pudełka.
Model pudełka CSS
W CSS termin „model pudełkowy” jest używany w odniesieniu do projektu i układu.
Model pudełek CSS jest zasadniczo pudełkiem, które owija się wokół każdego elementu HTML. Składa się z: marginesów, obramowań, dopełnienia i samej zawartości. Poniższy obrazek ilustruje model pudełkowy:
Wyjaśnienie różnych części:
- Treść — zawartość pudełka, w którym pojawia się tekst i obrazy
- Padding — czyści obszar wokół zawartości. Wyściółka jest przezroczysta
- Obramowanie — obramowanie, które otacza wyściółkę i zawartość
- Margines — czyści obszar poza granicą. Margines jest przezroczysty
Model pudełkowy pozwala na dodanie obramowania wokół elementów oraz zdefiniowanie odstępu między elementami.
Przykład
Demonstracja modelu pudełkowego:
div {
width: 300px;
border: 15px solid
green;
padding: 50px;
margin: 20px;
}
Szerokość i wysokość elementu
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