Box model CSS

W kontekście HTML, każdy element można traktować jak pudełko, podobne do paczki, którą wysyłamy pocztą. Przeanalizujmy to na przykładzie paczki:

Wymiary paczki: każde pudełko ma określone wymiary, takie jak wysokość (właściwość height) i szerokość (właściwość width).

Obramowanie paczki: pudełko może mieć obramowanie, na przykład dekoracyjny papier, co odpowiada właściwości border w HTML.

Odległość między paczkami: ponieważ nie zawsze wiadomo, co znajduje się w przesyłce, paczka musi zachować pewien margines od innych przesyłek, co w HTML odpowiada właściwości margin.

Przestrzeń wewnątrz paczki: nie możemy zapakować do paczki elementu większego niż jej rozmiar, więc musimy zostawić pewną przestrzeń wewnątrz pudełka, znaną jako padding w HTML.

Mając na uwadze te spostrzeżenia, można lepiej zrozumieć, jak elementy HTML są traktowane jak pudełka i jak można je odpowiednio stylizować.

Ilustracja powyżej opisuje box model. Każdy element na stronie interpretujemy jako pudełko, które ma swoje wymiary. Pamiętajmy, że elementy mają wymiary nawet wtedy, kiedy ich nie deklarujemy. Pamiętajmy również, żeby nie ustawiać wszystkim elementom wysokości i szerokości - jest to częsty błąd osób, które zaczynają przygodę ze stylami.

Border to po prostu obramowanie elementu. Może być przykładowo jednopikselowy obrys karty na stronie internetowej:

Margines służy nam do tworzenia odstępów między elementami:

Padding służy nam do tworzenia odstępów wewnątrz danego elementu. Przykładem może być karta, w której tekst jest oddalony o 20px od granic sekcji: