CSS model kutije : CSS box model

Model kutije (engl. box model) opisuje način kako je uređen prostor oko html elemenata.

Css svojstvo background-color određuje pozadinsku boju sadržaja, ispune (engl. padding) i obruba (engl. border) elementa. Ispuna elementa je prostor između sadržaja i obruba.

Ukupna širina elementa sastoji se od zbroja širine lijevog ruba (engl. margin-left), širine lijevog obruba (engl. border-left), širine lijevog odmaka (engl. padding-left), širine samog elementa (engl. width), širine desnog odmaka (engl. padding-right), širine desnog obruba (engl. border-right) i širine desnog ruba (engl. margin-right).

Ukupna visina elementa sastoji se od zbroja visine gornjeg ruba (engl. margin-top), visine gornjeg obruba (engl. border-top), visine gornjeg odmaka (engl. padding-top), visine samog elementa (engl. height), visine donjeg odmaka (engl. padding-bottom), visine donjeg obruba (engl. border-bottom) i visine donjeg ruba (engl. margin-bottom).

.box {
	width: 300px;
	height: 200px;
	padding: 10px;
	border: 1px solid #ccc;
	margin: 20px;
}

Ukupna širina : 20 + 1 + 10 + 300 + 10 + 1 + 20 = 362px

Ukupna visina: 20 + 1 + 10 + 200 + 10 + 1 + 20 = 262px

Obrubi (engl. borders)

<!DOCTYPE html>
<html lang="hr">
  <head>
  <meta charset="utf-8" />
  <title>Svojstva stila obruba</title>
  <style>
    p.solid { border-style: solid; }
    p.double { border-style: double; }
    p.groove { border-style: groove; }
    p.dotted { border-style: dotted; }
    p.dashed { border-style: dashed; }
    p.inset { border-style: inset; }
    p.outset { border-style: ouotset; }
  </style>
  </head>
  <body>
    <p class="solid">Ovo je puni obrub</p>
    <p class="double">Ovo je dvostruki obrub</p>
    <p class="groove">Ovo je udubljeni obrub</p>
    <p class="dotted">Ovo je točkasti obrub</p>
    <p class="dashed">Ovo je crtkasti obrub</p>
    <p class="inset">Ovo je uvučeni obrub</p>
    <p class="outset">Ovo je ispupčeni obrub</p>
  </body>
</html>

Promjena obruba

Sva tri svojstva obruba (širinu, stil i boju obruba) sve četiri stranice html elementa mijenjamo pomoću svojstva border.

Želimo li promijeniti obrub (širinu, stil i boju obruba) samo jedne stranice html elementa a ostale da ostanu nepromijenjene koristimo css svojstva:

border-top
border-right
border-bottom
border-left

Promjena širine obruba

Kada želimo promijeniti širinu sve četiri stranice obruba to činimo pomoću css svojstva: border-width

Želimo li promijeniti širinu obruba samo jedne stranice html elementa a ostale stranice da ostanu nepromijenjene koristimo css svojstva:

border-width-top
border-width-right
border-width-bottom
border-width-left

Promjena stila obruba

Kada želimo promijeniti stil sve četiri stranice obruba to činimo pomoću css svojstva: border-style

Želimo li promijeniti stil obruba samo jedne stranice html elementa a ostale stranice da ostanu nepromijenjene koristimo css svojstva:

border-style-top
border-style-right
border-style-bottom
border-style-left

Promjena boje obruba

Kada želimo promijeniti boju sve četiri stranice obruba to činimo pomoću css svojstva: border-color

Želimo li promijeniti boju obruba samo jedne stranice html elementa a ostale stranice da ostanu nepromijenjene koristimo css svojstva:

border-color-top
border-color-right
border-color-bottom
border-color-left

Model sata / skraćeno pisanje

Kada želimo postaviti boju sva četiri svojstva boje obruba odjednom umjesto:

  border-color-top: green;
  border-color-right: yellow;
  border-color-bottom: blue;
  border-color-left: red;

pišemo:

border-color: green yellow blue red;

Kada želimo pomoću css svojstva border-color postaviti sve četire širine odmaka možemo navesti: jednu, dvije, tri ili četiri vrijednosti.

Ako css svojstvu modela kutije (margin, border, padding) dodijelimo četiri vrijednosti tada navodimo prvo gornju vrijednost (model sata) a zatim desnu vrijednost (model sata), zatim donju vrijednost (model sata) i na kraju lijevu vrijednost (model sata).

Dakle krećemo se od podneva – gornja stranica, preko tri sata - desna stranica, šest sati – donja stranica, svo do devet sati – lijeva stranica (model sata).

<!DOCTYPE html>
<html lang="hr">
  <head>
  <meta charset="utf-8" />
  <title>Širina obruba</title>
  <style>
    p.prvi {border-style: solid; border-width: 5px; }
    p.drugi {border-style: solid; border-width: 5px 50px; }
    p.treci {border-style: solid; border-width: 5px 50px 15px; }
    p.cetvrti {border-style: solid; border-width: 5px 50px 15px 100px; }
  </style>
  </head>
  <body>
    <p class="prvi">Sve četiri stranice ista širina</p>
    <p class="drugi">Gornja-donja i desna-lijeva ista širina</p>
    <p class="treci">Gornji i donja svoja širina, desna-lijeva ista</p>
    <p class="cetvrti">Svaka stanica svoja širina</p>
  </body>
</html>

Ako css svojstvu modela kutije (margin, border, padding) dodijelimo jednu vrijednost ona će se primijeniti na sve četiri stranice html elementa.

Ako css svojstvu modela kutije (margin, border, padding) dodijelimo dvije vrijednosti tada navodimo prvo gornju vrijednost (model sata) a zatim desnu vrijednost (model sata). Vrijednosti stranica koje nisu navedene se uzimaju od suprotne vrijednosti (model sata) lijeva od desne a donja od gornje.

Ako css svojstvu modela kutije (margin, border, padding) dodijelimo tri vrijednosti tada navodimo prvo gornju vrijednost (model sata) a zatim desnu vrijednost (model sata) i na kraju donju vrijednost (model sata). Preostala lijeva vrijednost se uzima od suprotne vrijednosti (model sata) dakle od desne.

Promjena obruba skraćeno

Umjesto:

border-width: 1px;
border-style: solid;
border-color: blue;

pišemo za promjena sva tri svojstva obruba:

border: 1px solid blue;

Redoslijed navođenja svojstava je bitan (dakle border: width style color; ).

Promjena rubova (engl. margins)

Kada želimo promijeniti boju sve četiri stranice rubova to činimo pomoću css svojstva: margin

Želimo li promijeniti boju obruba samo jedne stranice html elementa a ostale stranice da ostanu nepromijenjene koristimo css svojstva:

margin-top
margin-right
margin-bottom
margin-left

Kada želimo pomoću css svojstva margin postaviti sve četire širine odmaka možemo navesti: jednu, dvije, tri ili četiri vrijednosti.

Ako css svojstvu modela kutije (margin, border, padding) dodijelimo četiri vrijednosti tada navodimo prvo gornju vrijednost (model sata) a zatim desnu vrijednost (model sata), zatim donju vrijednost (model sata) i na kraju lijevu vrijednost (model sata).

Dakle krećemo se od podneva – gornja stranica, preko tri sata - desna stranica, šest sati – donja stranica, svo do devet sati – lijeva stranica (model sata).

<!DOCTYPE html>
<html lang="hr">
  <head>
  <meta charset="utf-8" />
  <title>Širina rubova</title>
  <style>
    p.prvi {border-style: solid; margin: 50px; }
    p.drugi {border-style: solid; margin: 50px 100px; }
    p.treci {border-style: solid; margin: 50px 100px 30px; }
    p.cetvrti {border-style: solid; margin: 50px 100px 30px 200px; }
    </style>
  </head>
  <body>
    <p class="prvi">Sve četiri stranice ista širina</p>
    <p class="drugi">Gornja-donja i desna-lijeva ista širina</p>
    <p class="treci">Gornji i donja svoja širina, desna-lijeva ista</p>
    <p class="cetvrti">Svaka stanica svoja širina</p>
  </body>
</html>

Ako css svojstvu modela kutije (margin, border, padding) dodijelimo jednu vrijednost ona će se primijeniti na sve četiri stranice html elementa.

Ako css svojstvu modela kutije (margin, border, padding) dodijelimo dvije vrijednosti tada navodimo prvo gornju vrijednost (model sata) a zatim desnu vrijednost (model sata). Vrijednosti stranica koje nisu navedene se uzimaju od suprotne vrijednosti (model sata) lijeva od desne a donja od gornje.

Ako css svojstvu modela kutije (margin, border, padding) dodijelimo tri vrijednosti tada navodimo prvo gornju vrijednost (model sata) a zatim desnu vrijednost (model sata) i na kraju donju vrijednost (model sata). Preostala lijeva vrijednost se uzima od suprotne vrijednosti (model sata) dakle od desne.

Promjena odmaka (engl. paddings)

Širinu odmaka sve četiri stranice html elementa mijenjamo pomoću svojstva padding.

Želimo li promijeniti širinu odmaka samo jedne stranice html elementa a ostale da ostanu nepromijenjene koristimo css svojstva:

padding-top
padding-right
padding-bottom
padding-left

Kada želimo pomoću css svojstva padding postaviti sve četire širine odmaka možemo navesti: jednu, dvije, tri ili četiri vrijednosti.

Ako css svojstvu modela kutije (margin, border, padding) dodijelimo četiri vrijednosti tada navodimo prvo gornju vrijednost (model sata) a zatim desnu vrijednost (model sata), zatim donju vrijednost (model sata) i na kraju lijevu vrijednost (model sata).

Dakle krećemo se od podneva – gornja stranica, preko tri sata - desna stranica, šest sati – donja stranica, svo do devet sati – lijeva stranica (model sata).

<!DOCTYPE html>
<html lang="hr">
  <head>
  <meta charset="utf-8" />
  <title>Širina odmaka</title>
  <style>
    p.prvi {border-style: solid; padding: 50px; }
    p.drugi {border-style: solid; padding: 50px 100px; }
    p.treci {border-style: solid; padding: 50px 100px 30px; }
    p.cetvrti {border-style: solid; padding: 50px 100px 30px 200px; }
  </style>
  </head>
  <body>
    <p class="prvi">Sve četiri stranice ista širina</p>
    <p class="drugi">Gornja-donja i desna-lijeva ista širina</p>
    <p class="treci">Gornji i donja svoja širina, desna-lijeva ista</p>
    <p class="cetvrti">Svaka stanica svoja širina</p>
  </body>
</html>

Ako css svojstvu modela kutije (margin, border, padding) dodijelimo jednu vrijednost ona će se primijeniti na sve četiri stranice html elementa.

Ako css svojstvu modela kutije (margin, border, padding) dodijelimo dvije vrijednosti tada navodimo prvo gornju vrijednost (model sata) a zatim desnu vrijednost (model sata). Vrijednosti stranica koje nisu navedene se uzimaju od suprotne vrijednosti (model sata) lijeva od desne a donja od gornje.

Ako css svojstvu modela kutije (margin, border, padding) dodijelimo tri vrijednosti tada navodimo prvo gornju vrijednost (model sata) a zatim desnu vrijednost (model sata) i na kraju donju vrijednost (model sata). Preostala lijeva vrijednost se uzima od suprotne vrijednosti (model sata) dakle od desne.