CSS:ssä se Box Model on tärkeä käsite määritettäessä, kuinka elementti rakennetaan ja sijoitetaan verkkosivulle. Se koostuu peruskomponenteista, kuten Sisältö, Padding, Border ja Margin.
Content
Content on alue, joka sisältää elementin todellisen sisällön, kuten tekstiä, kuvia tai videoita.
Sisällön koon määrittämiseen käytämme width ja height ominaisuuksia.
Padding
Padding on tila sisällön ympärillä, mikä luo aukon sisällön ja elementin väliin border.
Arvojen määrittämiseen padding käytämme padding-top, padding-right,padding-bottom ja ominaisuuksia. padding-left
Border
Se Border on elementin ympärillä oleva ääriviiva, joka luo selkeän rajan sisällön ja ympäröivän alueen välille.
Muotoilemme, , ja border ominaisuuksia . border-width border-style border-color
Margin
Margin on elementin ulkopuolella oleva tila border, joka luo aukon muiden elementtien välille.
Arvojen määrittämiseen margin käytämme ominaisuuksia margin-top, margin-right, ja. margin-bottom margin-left
CSS: n avulla Box Model voimme mukauttaa elementin kokoa ja sijaintia muokkaamalla sen komponenttien arvoja.
Esimerkki:
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}
Yllä olevassa esimerkissä luokan elementin .box leveys on 200 kuvapistettä ja korkeus 100 kuvapistettä. Siinä on 20 kuvapistettä padding, musta, border jonka paksuus on 1 kuvapiste, ja 10 kuvapistettä margin.
Säätämällä näitä arvoja voit luoda Web-sivullesi erikokoisia ja -välisiä elementtejä. Käyttämällä toimintoa Box Model voit hallita käyttöliittymäsi elementtien sijaintia, kokoa ja väliä.