W CSS Box Model jest to ważna koncepcja określająca strukturę i położenie elementu na stronie internetowej. Składa się z podstawowych komponentów, takich jak Treść, Padding, Border i Margin.
Content
Content to obszar zawierający rzeczywistą zawartość elementu, taką jak tekst, obrazy lub filmy.
Aby zdefiniować rozmiar zawartości, używamy właściwości width i height.
Padding
Padding to przestrzeń wokół treści, tworząca lukę między treścią a elementem border.
Aby określić padding wartości, używamy właściwości padding-top, padding-right,padding-bottom i . padding-left
Border
Jest Border to kontur wokół elementu, tworzący wyraźną granicę między zawartością a otaczającym obszarem.
Aby sformatować border, używamy właściwości border-width, border-style i border-color .
Margin
Margin to przestrzeń poza elementem border, tworząca lukę między innymi elementami.
Aby zdefiniować wartości margin, używamy właściwości margin-top, i. margin-right margin-bottom margin-left
Korzystając Box Model z CSS, możemy dostosować rozmiar i położenie elementu, modyfikując wartości jego komponentów.
Przykład:
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}
W powyższym przykładzie element z klasą .box ma szerokość 200px i wysokość 100px. Ma 20px padding, czarny border o grubości 1px i 10px margin.
Dostosowując te wartości, możesz tworzyć elementy o różnych rozmiarach i odstępach na swojej stronie internetowej. Korzystając z Box Model, masz kontrolę nad pozycjonowaniem, rozmiarem i odstępami elementów w swoim interfejsie.