CSS Box Model yra svarbi sąvoka nustatant, kaip elementas yra struktūrizuotas ir išdėstytas tinklalapyje. Jį sudaro pagrindiniai komponentai, tokie kaip turinys, Padding, Border ir Margin.
Content
Content yra sritis, kurioje yra tikrasis elemento turinys, pvz., tekstas, vaizdai ar vaizdo įrašai.
Norėdami apibrėžti turinio dydį, naudojame width ir height savybes.
Padding
Padding yra erdvė aplink turinį, sukurianti atotrūkį tarp turinio ir elemento border.
Norėdami nurodyti padding reikšmes, naudojame padding-top, padding-right,padding-bottom ir savybes. padding-left
Border
Tai Border yra kontūras aplink elementą, sukuriantis aiškią ribą tarp turinio ir supančios srities.
Norėdami formatuoti border, naudojame border-width, border-style, ir border-color savybes.
Margin
Margin yra erdvė už elemento ribų border, sukurianti tarpą tarp kitų elementų.
Norėdami apibrėžti margin reikšmes, naudojame margin-top, margin-right, ir savybes. margin-bottom margin-left
Naudodami Box Model CSS, galime tinkinti elemento dydį ir padėtį modifikuodami jo komponentų reikšmes.
Pavyzdys:
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}
Aukščiau pateiktame pavyzdyje elemento su klase .box plotis yra 200 pikselių, o aukštis- 100 pikselių. Jis turi 20 piks padding., juodą border, kurio storis 1 piks., ir 10 piks margin.
Koreguodami šias reikšmes galite sukurti skirtingų dydžių ir tarpų savo tinklalapyje elementus. Naudodami Box Model, galite valdyti sąsajos elementų padėtį, dydį ir tarpus.