CSS - Padding


CSS Padding svojstva

Svojstva dodavanja CSS-a omogućava vam postavljanje razmaka između sadržaja elementa i njegove granice (ili ivice okvira elementa, ako nema definisanu granicu (boreder). Na padding utiče boja pozadine elementa. Na primjer, ako postavite boju pozadine za element, ona će biti vidljiva kroz područje popunjavanja.



Definisanje padding-a za pojedinačne strane

Padding možete odrediti za pojedinačne strane elementa kao što su gornja, desna, donja i lijeva strana koristeći CSS svojstva padding-top, padding-right, padding-bottom i padding-left. Isprobajmo primjer kako biste shvatili kako to funkcionira:

h1 {
    padding-top: 50px;
    padding-bottom: 100px;
}
p {
    padding-left: 75px;
    padding-right: 75px;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Padding za pojedinačne strane</title>
<style>
    h1 {
        padding-top: 50px;
        padding-bottom: 100px;
        background: lime;
    }
    p {
        padding-left: 75px;
        padding-right: 75px;
        background: lime;
    }
</style>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <p>Volim učiti CSS3 uz IT TUTORIJALE.</p>
    <p><strong>Napomena:</strong> Poigrajte se vrijednošću svojstva padding da biste vidjeli kako funkcioniše.</p>
</body>
</html>                            

Svojstva padding mogu se navesti pomoću sljedećih vrijednosti:

  • dužina (langht) - određuje padding u px, em, rem, pt, cm itd.
  • % - navodi popunjavanje u procentima (%) širine elementa koji sadrži.
  • nasljediti (inherit) - specifikuje da širinu treba naslijediti od nadređenog elementa.


Stenografsko svojstvo paddinga

Svojstvo padding je stenografsko svojstvo koje služi kako bi se izbjeglo postavljanje paddinga svake strane posebno, tj. padding-top, padding-right, padding-bottom i padding-left. Pogledajmo sljedeći primjer da biste razumjeli kako to u osnovi funkcionira:

h1 {
    padding: 50px; /* primjeni na sve strane */
}
p {
    padding: 25px 75px; /* vertikalno| horizontalno */
}
div {
    padding: 25px 50px 75px; /* gore | horizontalno | dole */
}
pre {
    padding: 25px 50px 75px 100px; /* gore | desno | dole | ljevo */
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Postavljanje peddinga sa svih strana odjednom</title>
<style>
    h1 {
        padding: 50px; /* primijeniti na sve četiri strane */
    }
    p {
        padding: 25px 75px; /* vertikalno | horizontalno */
    }
    div {
        padding: 25px 50px 75px; /* gore | horizontalno | deole */
    }
    pre {
        padding: 25px 50px 75px 100px; /* gore | desno | dole | ljevo */
    }
    h1, p, div, pre {
        background: lime;
    }
</style>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <p>Volim učiti CSS3 uz IT TUTORIJALE.</p>
    <div>Učenje s nama nije mučenje.</div>
    <pre>Uči i ti s najvećom IT zajednicom na Balkanu.</pre>
    <p><strong>Napomena:</strong> Poigrajte se vrijednošću svojstva padding da biste vidjeli kako funkcioniše.</p>
</body>
</html>                            

Ovaj stenografski zapis može imati jednu, dvije, tri ili četiri vrijednosti razdvojene razmakom.

  • Ako je navedena jedna vrijednost, primjenjuje se na sve četiri strane.
  • Ako su navedene dvije vrijednosti, prva se vrijednost primjenjuje na gornju i donju stranu, a druga vrijednost na desnu i lijevu stranu okvira elementa.
  • Ako su navedene tri vrijednosti, prva se vrijednost primjenjuje na vrh, druga vrijednost primjenjuje se na desnu i lijevu stranu, a zadnja vrijednost na dnu.
  • Ako su navedene četiri vrijednosti, primjenjuju se na gornju, desnu, donju i lijevu stranu okvira elementa, prema navedenom redoslijedu.

Preporučuje se korištenje stenografskih svojstava, to će vam pomoći da uštedite malo vremena izbjegavajući dodatno kucanje i olakšava praćenje i održavanje vašeg CSS koda.



Učinak padding i border na izgled

Prilikom kreiranja izgleda web stranica, dodavanje padding ili border elementima ponekad daje neočekivani rezultat, jer padding i border dodaju širini i visini okvira koji generiše element, kao što ste naučili u lekciji CSS Box model. Na primjer, ako postavite širinu elementa <div> na 100% i na njega primijenite lijevi ili desni padding ili border, pojavit će se vodoravna traka za pomicanje. Pogledajmo primjer:

div {
    width: 100%;
    padding: 25px;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Efekat CSS Padding na veličinu box-a elementa</title>
<style>
    div {
        width: 100%;
        padding: 25px;
        background: violet;
    }
</style>
</head>
<body>
    <div>
        <h1>IT TUTORIJALI</h1>
    </div>
    <p><strong>Napomena:</strong> Primjetite klizač na dnu okvira za prikaz.</p>
</body>
</html>

Da biste spriječili da padding i border mijenjaju širinu i visinu okvira elementa, možete koristiti svojstvo CSS box-sizing. U sljedećem primjeru širina i visina okvira <div> ostaće nepromijenjene, međutim, područje njegovog sadržaja smanjit će se s povećanjem padding-a ili border-a.

div {
    width: 100%;
    padding: 25px;
    box-sizing: border-box;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Sprječavanje promjene u dimenzijama okvira za elemente</title>
<style>
    div {
        width: 100%;
        padding: 25px;
        box-sizing: border-box;
        background: violet;
    }
</style>
</head>
<body>
    <div>
        <h1>IT TUTORIJALI</h1>
    </div>
    <p><strong>Napomena:</strong> Ovoga puta na dnu okvira za prikaz nema trake za pomicanje.</p>
</body>
</html>