Laatikkomallin Ymmärtäminen Käytännönläheisesti

Jokainen verkkosivun elementti esitetään suorakulmaisena laatikkona. Jokainen laatikko koostuu neljästä osasta:

• Sisältö: varsinainen teksti tai elementit;
• Täyte (padding): tila elementin sisällä;
• Reunus (border): ympäröi sisällön ja täytteen;
• Marginaali: tila elementin ulkopuolella.

Visuaalinen rakenne

Marginaali → Reunus → Täyte → Sisältö. Elementin kokonaiskoko määräytyy kaikkien näiden osien perusteella.

Sisältö

Elementin näkyvä osa: teksti, kuvat tai muut elementit.

Täyte (Sisäinen tila)

Luo tilaa sisällön ja reunan väliin.

.box {
  padding: 20px;
}

Lyhytmuoto

padding: 20px; /* all sides */
padding: 10px 20px; /* top/bottom | left/right */
padding: 10px 20px 5px; /* top | left/right | bottom */
padding: 10px 15px 20px 25px; /* top | right | bottom | left */

Marginaali (Ulkoinen tila)

Luo tilaa elementtien välille.

.box {
  margin: 20px;
}

Lyhytmuoto

margin: 20px;
margin: 10px 20px;
margin: 10px 20px 5px;
margin: 10px 15px 20px 25px;

Reunaviiva

Määrittää elementin reunan.

.box {
  border: 4px solid darkblue;
}

Keskeinen ero

• Padding → sisäinen tila (vaikuttaa taustaan);
• Margin → ulkoinen tila (ei vaikuta taustaan).

Laatikon koon määrittely

Määrittää, miten leveys ja korkeus lasketaan.

box-sizing: content-box; /* default */
box-sizing: border-box;

• content-box: täyte ja reunus lisätään kokoon;
• border-box: kaikki sisältyy kokoon.

Käytännön projekteissa suositellaan border-box-asetusta.