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.
Css svojstvo padding određuje širinu odmaka za sve četiri stranice elementa. Odmak (engl. padding) je, kao što i ime kaže, odmak obruba (engl. border) od sadržaja html elementa. Pogledajte sliku 1.
Kada blok elementu nije dodijeljen obrub (engl. border) i kada mu je boja pozadine ista kao i roditeljskom elementu, može se činiti kako nema razlike između css svojstva padding i margin. No kada promijenimo boju pozadine, tada vidimo razliku.
boja pozadine rubnice i odmakaRazlika između odmaka (engl. padding) i rubnice (engl. margin) blok elementa - kada nije prikazan obrub (engl. border) - je u tome što je pozadina rubnice jednaka pozadini roditeljskog elementa, dok je pozadina odmaka i samog elementa ista i zadajemo je pomoću background-* svojstva.
Postoji još jedna razlika između css svojstva padding i margin, a to je pojava rušenja rubnica (engl. margin collapse).
rušenje rubnice (engl. margin collapse)Samo kod susjednih vodoravnih rubnica (engl. margin), donje i gornje, događa se rušenje rubnica. Zajedničku veličinu međuprostora, određuje iznos veće rubnice (engl. margin), donje ili gornje. Veća rubnica će srušiti manju. Njihove vrijednosti se ne će zbrojiti.
Numerička vrijednost svojstva može biti zadana u px, em, rem, vh and vw jedinicama.
Uporabom css svojstva padding, uvijek mijenjamo širinu odmaka za sve četiri stranice elementa, neovisno koliko smo mu vrijednosti dodijelili!
Css svojstvu padding možemo dodijeliti, od jedne do četiri vrijednosti.
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.
Kada css svojstvu padding dodijelimo samo jednu vrijednost, dodijeljena vrijednost širine odmaka primjenit će se na sve četiri stranice.
Kada navedemo dvije vrijednosti, tada se dodijeljene vrijednosti širine nasuprotnih stranica - gornjeg i desnog odmaka - preslikavaju u nedodijeljene vrijednosti, širine donjeg i lijeveg odmaka.
Kada navedemo tri vrijednosti, tada se dodijeljena vrijednost širine odmaka nasuprotne stranice - desnog odmaka - preslikava u nedodijeljenu vrijednosti, širinu lijevog odmaka.
padding: 5px;
/* kao: padding: 5px 5px 5px 5px; */
/* skraćuje pojedinačno pisanje: */
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding: 15px 8px;
/* kao: padding: 15px 8px 15px 8px; */
padding: 5px 8px 15px;
/* kao: padding: 5px 8px 15px 8px; */
padding: 15px 8px 25px 12px;
/* skraćuje pojedinačno pisanje: */
padding-top: 15px;
padding-right: 8px;
padding-bottom: 25px;
padding-left: 12px;
U prethodnim primjerima, mijenjali smo pomoću css svojstva padding, širinu odmaka za sve četiri stranice html elementa. Ponekad želimo promijeniti širinu odmaka, samo jedne stranice.
U slijedećem primjeru, svaki redak služi određivanju širine odmaka (engl. padding) samo jedne stranice html elementa. U našem stilskom pravilu, uporabit ćemo samo oblikovanje za stranice koje želimo promijeniti, ostala css svojstva iz primjera ne navodimo.
p {
padding-top: 5px; /* određuje širinu, samo gornjeg odmaka */
padding-right: 8px; /* određuje širinu, samo desnog odmaka */
padding-bottom: 25px; /* određuje širinu, samo donjeg odmaka */
padding-left: 12px; /* određuje širinu, samo lijevog odmaka */
}
Sljedeći primjer pokazuje načine zadavanja vrijednosti odmaka (engl. padding). U njima koristimo slike cvijet.jpg i priroda.jpg. Trebate ih preuzeti pomoću donjih poveznica.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS odmak (engl. padding)</title>
<style>
/* ovaj dio odnosi se na opće oblikovanje stranice */
* {
padding: 0; /* pomoću univerzalnog selektora dodjeljujemo */
margin: 0; /* vrijednosti svih odmaka i rubnica na nulu */
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 20px; /* veličina slova odlomka, ostali razmjerno veci */
}
section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
}
article {
color: rebeccapurple;
margin: 10px; /* rubnica svakog elementa article */
padding: 10px; /* odmak svakog elementa article */
}
h1, h2, p {
margin: 10px; /* rubnica elemenata h1, h2 i p */
padding: 20px; /* odmak elemenata h1, h2 i p */
font-weight: 100; /* debljina slova */
line-height: 1.5; /* razmak između redaka */
letter-spacing: 1.15px; /* razmak između slova */
}
h2 {
color: dimgray;
text-align: justify; /* obostrano poravnanje naslova h2 */
}
.stupac1 {
border: 2px solid fuchsia;
}
.stupac2 {
border: 2px solid limegreen;
}
/* većina ovog dijela odnosi se na css svojstvo padding */
.stupac1 h2 {
border-left: 2px solid fuchsia;
border-right: 2px solid fuchsia;
padding-left: 15%;
}
.stupac1 p {
padding-top: 20px;
padding-left: 15%;
}
.stupac1 img {
width: 50%;
padding-top: 100px;
padding-left: 40px;
padding-bottom: 40px;
}
.stupac2 h2 {
border-left: 2px solid limegreen;
border-right: 2px solid limegreen;
}
.stupac2 p {
padding-right: 15%;
}
.stupac2 img {
width: 50%;
padding-top: 35px;
padding-left: 45%;
padding-bottom: 105px;
}
</style>
</head>
<body>
<h1>Bartol plus - odmak (engl. padding)</h1>
<section>
<article class="stupac1">
<h2>Model kutije - odmak (engl. padding)</h2>
<p>Sigurni smo kako ste već savladali osnove skriptnih jezika, sada nastaljamo dalje s upoznavanjem css svojstva. Nastavljamo s modelom kutije, unutar kojega ćemo upoznati css svojstva rubnice, obruba i odmaka.</p>
<img src="cvijet.jpg" alt="Predivan cvijet" />
</article>
<article class="stupac2">
<img src="priroda.jpg" alt="Božje djelo" />
<h2>Model kutije - odmak (engl. padding)</h2>
<p>Sigurni smo kako ste već savladali osnove skriptnih jezika, sada nastaljamo dalje s upoznavanjem css svojstva. Nastavljamo s modelom kutije, unutar kojega ćemo upoznati css svojstva rubnice, obruba i odmaka.</p>
</article>
</section>
</body>
</html>CDN pohrana slika i videa.
AI povećanje slika.
Pretvorba formata slika: webp...
25Gb podataka.
Zašto ne sada?
