În CSS, Box Model este un concept important pentru a determina modul în care un element este structurat și poziționat pe o pagină web. Este format din componente fundamentale, cum ar fi Conținut Padding, Border și Margin.
Content
Content este zona care conține conținutul real al elementului, cum ar fi text, imagini sau videoclipuri.
Pentru a defini dimensiunea conținutului, folosim proprietățile width și height.
Padding
Padding este spațiul din jurul conținutului, creând un decalaj între conținut și elementul border.
Pentru a specifica padding valori, folosim proprietățile padding-top, padding-right,padding-bottom și . padding-left
Border
Este Border conturul din jurul elementului, creând o graniță clară între conținut și zona înconjurătoare.
Pentru a formata border, folosim proprietățile border-width, border-style și border-color .
Margin
Margin este spațiul din afara elementului border, creând un decalaj între alte elemente.
Pentru a defini valori margin, folosim proprietățile margin-top, și. margin-right margin-bottom margin-left
Prin utilizarea Box Model în CSS, putem personaliza dimensiunea și poziția unui element prin modificarea valorilor componentelor sale.
Exemplu:
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}
În exemplul de mai sus, elementul cu clasa .box are o lățime de 200px și o înălțime de 100px. Are un 20px padding, un negru border cu o grosime de 1px și un 10px margin.
Prin ajustarea acestor valori, puteți crea elemente cu diferite dimensiuni și spațiere pe pagina dvs. web. Prin utilizarea Box Model, aveți control asupra poziționării, dimensiunii și distanței elementelor din interfața dvs.