NEDSCHOOLDEV

view_headline menu
yt yt yt

CSS

CSS CSS Uvod CSS Upotreba CSS Boje CSS Pozadine CSS Borders CSS Margine CSS Padding CSS Height/Width CSS Float CSS Tekst CSS Font CSS Poravnanje CSS Linkovi CSS Liste CSS Tabele CSS Ikone








CSS Padding

<< >>



Za šta se koristi CSS padding?


CSS Padding se koristi za određivanje praznog prostora unutar HTML elementa između sadržaja i granice elementa.

Da bi odredili padding oko nekog HTML elemnta koristimo parametar padding.


Primjer:


Ovaj paragraph ima padding 60px, sa svih strana.


play_arrow

p    { padding: 60px; }


Vrijednosti parametara

U primjeru je vrijednost padding postavljena u pixelima (px), ali pored pixela postoje i drugi oblici.

Svi praametri margine imaju sljedeće vrijednosti:


dužina - određuje se tačno određena dužina u px, cm, pt.

postotak - određuje se veličina margine u postotcima (%).



Pojedinačne strane

Kao i kod margina, CSS omogućuje postavljanje padding za bilo koju stranu pojedinačno ( gore, dolje, lijevo, desno ).

Parametri za pojedinačno određivanje padding-a su:


padding-top - određuje padding sa gornje strane.

padding-right - određuje padding sa desne strane.

padding-bottom - određuje padding sa donje strane.

padding-left - određuje padding sa lijeve strane.


Primjer:


Ovaj paragraph ima padding 50px, sa gornje strane.


Ovaj paragraph ima padding 100px, sa desne strane.


Ovaj paragraph ima padding 100px, sa lijeve strane.


Ovaj paragraph ima padding 50px, sa donje strane.

play_arrow

p    { padding-top: 50px; }
p    { padding-right: 100px; }
p    { padding-left: 100px; }
p    { padding-bottom: 50px; }



Skraćeno pisanje padding-a


Pisanje pojedinačnih padding-a za svaki HTML element zauzima dosta prostora i vremena, a kod bude težak za čitanje.

CSS omogućuje da odjednom napišemo sve različite parametre padding-a, te na taj način olakšamo sebi posao.

To se postiže tako da se svi parametri padding stave pod jedan zajednički sa više vrijednosti.



Parametar sa četiri vrijednosti:

Ako parametar ima četiri vrijednosti, svaka od njih određuje po jednu stranu (gore, dolje, lijevo, desno).


margin: 10px 50px 20px 60px;

gornji padding = 30px

desni padding = 50px

donji padding = 20px

lijevi padding = 100px


Ovaj paragraph ima gornji padding 30px, desni padding 50px, donji padding 20px i lijevi padding 100px.

play_arrow

p    { padding: 30px 50px 20px 100px ; }



Parametar sa tri vrijednosti:

Ako parametar ima tri vrijednosti, prva predstavlja gornju marginu, druga predstavlja lijevu i desnu, a treća donju marginu.


padding: 10px 100px 60px;

gornji padding = 50px

lijevi i desna padding = 100px

donji padding = 20px


Ovaj paragraph ima gornji padding 50px, lijevi i desni padding 100px, i donju padding 20px.

play_arrow

p    { padding: 50px 100px 20px ; }



Parametar sa dvije vrijednosti:

Ako parametar ima dvije vrijednosti, prva predstavlja gornju i donju marginu, druga predstavlja lijevu i desnu.


padding: 30px 70px;

gornja i donji padding = 30px

lijeva i desni padding = 70px


Ovaj paragraph ima gornju i donji padding 30px, lijevi i desni padding 70px.

play_arrow

p    { margin: 30px 70px ; }



Parametar sa jednom vrijednosti:

Ako parametar ima jednu vrijednost, ona predstavlja istu marginu za sve četiri strane.


padding: 60px;

padding za sve četiri strane = 70px


Ovaj paragraph ima sva četiri padding-a od 60px.

play_arrow

p    { padding: 60px ; }



<< >>



© Copyright 2018. nedschool.com