Model kutije opisuje svaki blok element. On se sastoji od sadržaja, odmaka (engl. padding), obruba (engl. border) i rubnice (engl. margin). Vidi sliku 1.
nasljeđivanje svojstava modela kutijeVrijednosti css svojstava vezanih za model kutije: height, width, margin, border, padding se ne nasljeđuju. Primjenjuju se samo na selektirani html element.
Na način prikaza blok elementa utječu i css svojstva širina i visina (engl. width & height), veličina kutije (engl. box-sizing) i prelijev (engl overflow).
Pomoću css svojstva pozadine (engl. background) možemo dodatno oblikovati pozadinu html elementa.
Odmak (css svojstvo padding) je područje između sadržaja i obruba (engl. border). Boja pozadine (engl. background-color) odmaka je ista kao i boja pozadine html elementa.
Obrub (css svojstvo border) je područje između odmaka (engl. padding) i rubnice (engl. margin).
Rubnica (css svojstvo margin) je područje između obruba (engl. border) i susjednog ili roditeljskog elementa. Boja pozadine (engl. background-color) rubnice je boje pozadine roditeljskog elementa.
Sadržaj (engl. content): Unutar njega je smješten tekst, slika ili drugi medijski sadržaj. Za zadanu (engl. default) vrijednost css svojstva box-sizing: content-box, css svojstva width i height određuju širinu i visinu sadržaja html elementa.
Stvarna veličina html elementa je veličina koju on zauzima na web stranici. Ovisno o vrijednosti css svojstva box-sizing, računanje stvarne širine i visine je različito.
Vrijednost svojstva box-sizing određuje granicu koju obuhvaćaju css svojstva width i height. Zadana (engl. default) vrijednost ovog css svojstva je content-box. Ona kazuje kako veličine odmaka (engl. padding) i obruba (engl. border) nisu uključene unutar vrijednosti dodijeljenih css svojstvima width i height.
Pogledajmo način računanja stvarne širine i visine, uz zadanu vrijednost css svojstva box-sizing: content-box.
Za računanje stvarne širine html elementa, potrebno je poznavati širinu (css svojstvo width) elementa, širinu lijevog i desnog odmaka (engl. padding), lijevog i desnog obruba (engl. border) i širinu lijeve i desne rubnice (engl. margin).
Kada nismo dodijelili vrijednosti odmaka i rubnice za pojedini html element, web preglednici dodjeljuju svoje početne vrijednosti. Za ozbiljnije kôdiranje potrebno je, načiniti reset svih css svojstava na zadanu ili null vrijednost.
Model kutije poznaje dva načina dodjeljivanja css svojstava padding, border i margin: skupno i pojedinačno.
Ponovimo css svojstva potrebna za računanje stvarne širine html elementa:
Uporabom skupnog dodjeljivanja, uvijek mijenjamo vrijednosti za sve četiri stranice elementa, neovisno o tome koliko smo vrijednosti umetnuli iza oznake svojstva.
Redoslijed skupnog navođenja vrijednosti stranica ide u smjeru kazaljke na satu, od podneva (gornja stranica), preko tri sata (desna stranica), šest sati (donja stranica) i na kraju devet sati (lijeva stanica). Vidi sliku 2.
padding (hrv. odmak) zadaje širinu odmaka za sve četiri stranice
border-width (hrv. obrub) zadaje širinu sva četiri obruba
margin (hrv. rubnica) zadaje širinu rubnice za sve četiri stranice
Uporabom pojedinačnog dodjeljivanja vrijednost uvijek zadajemo samo jednu stranicu modela kutuje.
margin-left zadaje vrijednost širine rubnice lijeve stranice (engl. margin).
border-left-width zadaje vrijednost širine lijevog obruba (engl. border).
padding-left zadaje vrijednost širine odmaka lijeve stranice (engl. padding).
padding-right zadaje vrijednost širine odmaka desne stranice (engl. padding).
border-right-width zadaje vrijednost širine desnog obruba (engl. border).
margin-right zadaje vrijednost širine rubnice desne stranice (engl. margin).
Više pojedinosti o načinima korištenja css svojstava margin, border i padding, potražite na poveznicama koje se nalaze na vrhu članka.
Pomoću css svojstva width, određujemo širinu sadržaja html elementa
Stvarna širina koju zauzuma html element na web stranici ne ovisi o tome jesmo li navedena css svojstva dodijelili, pomoću skupnog ili pojedinačnog dodjeljivanja vrijednosti.
Stvarnu širinu dobivamo zbrajanjem slijedećih vrijednosti:
širine lijeve rubnice (engl. left margin) +
širine lijevog obruba (engl. left border) +
širine lijevog odmaka (engl. left padding) +
širine sadržaja (engl. width) +
širine desnog odmaka (engl. right padding) +
širine desnog obruba (engl. right border) +
širine desne rubnice (engl. right margin)
Pogledajmo primjer skupnog i pojedinačnog dodjeljivanja (istih) vrijednosti svojstava modela kutije, odlomka <p>:
p {
width: 80px;
height: 50px;
margin: 25px 12px;
/* isto kao i - margin: 25px 12px 25px 12px; */
/* skraćuje pojedinačno pisanje: */
margin-top: 25px;
margin-right: 12px;
margin-bottom: 25px;
margin-left: 12px;
border: 3px solid olive;
/* skraćuje pojedinačno pisanje: */
border-top: 3px solid olive;
border-right: 3px solid olive;
border-bottom: 3px solid olive;
border-left: 3px solid olive;
padding: 5px 8px;
/* isto kao i - padding: 5px 8px 5px 8px; */
/* skraćuje pojedinačno pisanje: */
padding-top: 5px;
padding-right: 8px;
padding-bottom: 5px;
padding-left: 8px;
}
Isti primjer, uporabom samo skupnog dodjeljivanja vrijednosti:
p {
width: 80px;
height: 50px;
margin: 25px 12px;
border: 3px solid olive;
padding: 5px 8px;
}
Izračunajmo stvarnu širinu odlomka elementa iz gornjeg primjera.
Zbrojimo stavke navedene pod: d) Stvarna širina:
12px + 3px + 8px + 80px + 8px + 3px + 12px = 126px
Primijetite kako su - u našem slučaju - širina lijeve i desne rubnice (engl. margin) - 12px, širina lijevog i desnog obruba (engl. border) - 3px i širina lijevog i desnog odmaka (engl. padding) - 8px, jednake. To nije pravilo! Mogu biti i različite.
Za računanje stvarne visine html elementa, potrebno je poznavati visinu (css svojstvo height) elementa, visinu gornjeg i donjeg odmaka (engl. padding), gornjeg i donjeg obruba (engl. border) i visinu gornje i donje rubnice (engl. margin).
Ponovimo css svojstva potrebna za računanje stvarne visine html elementa:
Uporabom skupnog dodjeljivanja uvijek mijenjamo vrijednosti za sve četiri stranice elementa, neovisno o tome koliko smo vrijednosti umetnuli iza oznake svojstva.
Redoslijed skupnog navođenja vrijednosti stranica ide u smjeru kazaljke na satu, od podneva (gornja stranica), preko tri sata (desna stranica), šest sati (donja stranica) i na kraju devet sati (lijeva stanica). Vidi sliku 2.
margin (hrv. rubnica) zadaje širinu rubnice za sve četiri stranice
border (hrv. obrub) zadaje širinu sva četiri obruba
padding (hrv. odmak) zadaje širinu odmaka za sve četiri stranice
Uporabom pojedinačnog dodjeljivanja vrijednost uvijek zadajemo samo jednu stranicu modela kutuje.
margin-top zadaje vrijednost visine rubnice gornje stranice (engl. margin).
border-top-width zadaje vrijednost visine gornjeg obruba (engl. border).
padding-top zadaje vrijednost visine odmaka gornje stranice (engl. padding).
padding-bottom zadaje vrijednost visine odmaka donje stranice (engl. padding).
border-bottom-width zadaje vrijednost visine donjeg obruba (engl. border).
margin-bottom zadaje vrijednost visine rubnice donje stranice (engl. margin).
Pomoću css svojstva height, određujemo visinu sadržaja html elementa
Stvarnu visinu dobivamo zbrajanjem slijedećih vrijednosti:
visine gornje rubnice (engl. top margin) +
širine gornjeg obruba (engl. top border) +
visine gornjeg odmaka (engl. top padding) +
visine sadržaja (engl. height) +
visine donjeg odmaka (engl. bottom padding) +
širine donjeg obruba (engl. bottom border) +
visine donje rubnice (engl. bottom margin)
Pogledajmo primjer skupnog i pojedinačnog dodjeljivanja (istih) vrijednosti svojstava modela kutije, odlomka <p>:
p {
width: 80px;
height: 50px;
margin: 13px 6px 15px 8px;
/* skraćuje pojedinačno pisanje: */
margin-top: 13px;
margin-right: 6px;
margin-bottom: 15px;
margin-left: 8px;
border: 1px dotted chocolate;
/* skraćuje pojedinačno pisanje: */
border-top: 1px dotted chocolate;
border-right: 1px dotted chocolate;
border-bottom: 1px dotted chocolate;
border-left: 1px dotted chocolate;
padding: 5px 8px 25px 12px;
/* skraćuje pojedinačno pisanje: */
padding-top: 5px;
padding-right: 8px;
padding-bottom: 25px;
padding-left: 12px;
}
Isti primjer, uporabom samo skupnog dodjeljivanja vrijednosti:
p {
width: 80px;
height: 50px;
margin: 13px 6px 15px 8px;
border: 1px dotted chocolate;
padding: 5px 8px 25px 12px;
}
Izračunajmo stvarnu visinu odlomka iz gornjeg primjera.
Zbrojimo stavke navedene pod: d) Stvarna visina:
13px + 1px + 5px + 50px + 25px + 1px + 15px = 110px
U ovom primjeru visine gornje i donje rubnice (engl. margin) i gornjeg i donjeg odmaka (engl. padding) nisu iste.
Slijedeći primjer koristi css svojstva modela kutije, no koristi i mnoštvo css svojstava za oblikovanje teksta. Upoznat ćete ih sve u slijedećim lekcijama, a za sada možete eksperimentirati, izbacujući pojedino css svojstvo i promatrajući što će se promijeniti.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Model kutije u praksi</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background-color: blanchedalmond;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 20px; /* veličina slova odlomka, ostali su razmjerno veci */
font-weight: 100;
}
h1 {
overflow-y: hidden;
padding-left: 8%;
max-height: 130px;
color: #D2668D;
font-size: 100px;
font-weight: 100;
text-transform: uppercase;
}
header {
height: 50px;
margin: 20px 0;
background-color: snow;
}
header p {
padding: 3px 0 10px 50px;
font-size: 30px;
}
article {
float: right;
width: 400px;
padding: 30px;
}
section > article > .nav {
padding: 30px;
}
section > article > .nav > a {
display: block;
padding: 15px 0 20px;
color: maroon;
font-size: 25px;
font-weight: 100;
letter-spacing: 1.015px;
text-align: center;
text-decoration: none;
}
section > article > .nav > a:hover {
text-decoration: underline;
}
section > article > .box {
box-sizing: border-box;
max-width: 350px;
padding: 30px;
background-color: snow;
line-height: 2;
letter-spacing: 1.2px;
}
p#circle {
width: 50px;
height: 40px;
padding: 3px 0 7px;
border-radius: 50%;
margin: 80px 10px 0 auto;
color: yellow;
background-color: #D2668D;
font-weight: 500;
text-align: center;
}
@media screen and (width < 968px) {
.d-sm-none {
display: none;
}
}
</style>
</head>
<body>
<header>
<p>Logo</p>
</header>
<h1>Web dizajn</h1>
<section>
<article>
<div class="box">
<p>Sigurni smo kako ste već savladali osnove skriptnih jezika, sada krećemo dalje s upoznavanjem css svojstva. Slijedi model kutije...</p>
<p id="circle">hr</p>
</div>
</article>
<article class="d-sm-none">
<div class="nav">
<a>Tvoj dizajn</a>
<a>Izabrani dizajn</a>
<a>Zahvalan dizajn</a>
<a>Čudesan dizajn</a>
</div>
</article>
</section>
</body>
</html>CDN pohrana slika i videa.
AI povećanje slika.
Pretvorba formata slika: webp...
25Gb podataka.
Zašto ne sada?
