Visualizator modelu pudełka

Każdy element HTML jest renderowany jako prostokątny prostokąt. Model pudełkowy CSS opisuje, jak warstwy treści, padding, border i margin elementu nakładają się na siebie, określając całkowitą przestrzeń zajmowaną przez element na stronie. Zrozumienie tego modelu jest niezbędne do kontrolowania układu i odstępów.

Dostosuj wartości liczbowe dla każdej warstwy — margin, border, padding i wymiary treści. Kliknij sekcję warstwy, aby podświetlić ją na diagramie. Podgląd wizualny aktualizuje się natychmiast, a odpowiedni kod CSS jest generowany na dole do skopiowania.

Margin to przezroczysta przestrzeń na zewnątrz border, która oddziela element od sąsiadów. Border to widoczna granica wokół padding. Padding to przestrzeń między border a rzeczywistą treścią. Content to najbardziej wewnętrzny obszar, w którym pojawia się tekst i elementy podrzędne.

W przypadku content-box (domyślnie) ustawione width i height mają zastosowanie tylko do obszaru treści — padding i border są dodawane na wierzch. W przypadku border-box, width i height obejmują padding i border, co czyni obliczenia układu bardziej intuicyjnymi. Większość nowoczesnych projektów używa border-box globalnie.

Użyj tego wizualizatora, aby eksperymentować z różnymi wartościami i zobaczyć, jak każda warstwa wpływa na całkowity rozmiar elementu. Gdy element zajmuje więcej miejsca niż oczekiwano, sprawdź, czy wartości padding lub border nie powodują przekroczenia docelowej szerokości. Wygenerowany kod CSS można wkleić bezpośrednio do projektu.