Mis on kasti mudel CSS-is?

CSS ploki mudelis kirjeldab, kuidas elemendid kuvatakse lehel kui ristkülikukujulised plokid. See koosneb neljast tsoonist või kihist, mis kattuvad, alustades sisust:

1. Content (Sisu): Piirkond, kus asub elemendi tegelik sisu (tekst, pildid jne). Selle suurus määratakse omadustega width ja height.

2. Padding (Sisepadjand): Läbipaistev piirkond sisu ja elemendi piiri vahel. Määratakse omadustega padding-top, padding-right, padding-bottom, padding-left või lühivormiga padding.

3. Border (Piir): Joon, mis ümbritseb Paddingi ja Contenti. Selle stiil, paksus ja värv määratakse omadustega border-width, border-style, border-color või lühivormidega, näiteks border.

4. Margin (Välimine marginaal): Läbipaistev piirkond elemendi piiri ümber, mis eraldab selle teistest elementidest. Määratakse omadustega margin-top, margin-right, margin-bottom, margin-left või lühivormiga margin. Naabersobivate plokkide marginaalid võivad kokku sulada.

Standardkäitumine, mida kirjeldab box-sizing: content-box (vaikimisi), määrab, et omadused width ja height kehtivad ainult sisule (Content). Padding ja Border lisatakse sellele suurusele, suurendades üldist suurust.

Kasutades box-sizing: border-box, omadused width ja height hõlmavad Contenti, Paddingut ja Borderit. Margin lisatakse alati kogu elemendi suurusele, sõltumata box-sizing-ist.

Näide:

div {
  width: 100px; /* Sisus laius (content-box) või kogu elemendi laius (border-box) */
  height: 50px; /* Sisus kõrgus (content-box) või kogu elemendi kõrgus (border-box) */
  padding: 10px; /* Sisepadjand */
  border: 2px solid black; /* Piirjoon */
  margin: 15px; /* Välimine marginaal */
}

Sõltuvalt box-sizing väärtusest on tegelikud suurused erinevad:

• box-sizing: content-box: Tegelik laius = 100px (Content) + 10px (Padding-left) + 10px (Padding-right) + 2px (Piir-vasakul) + 2px (Piir-parem) = 124px. Tegelik kõrgus = 50px (Content) + 10px (Padding-üles) + 10px (Padding-alla) + 2px (Piir-üles) + 2px (Piir-alla) = 74px.
• box-sizing: border-box: Tegelik laius = 100px (Content + Padding + Border). Tegelik kõrgus = 50px (Content + Padding + Border).

Välimine marginaal margin: 15px lisatakse selle üldsuurusele.