Položaji (ang. Padding)

CSS Padding se uporablja za ustvarjanje prostora okoli vsebine elementa, znotraj katerekoli definirane meje. Obstajajo štirje elementi padding, to so LEFT, RIGHT, BOTTOM in TOP. Length (dolžina) določa padding v kraticah px, pt, cm itn., v odstotkih % širine elementa Inherit (podedovanje) pa določa, da mora položaj (ang. Padding) biti podedovan od parent elementa.

Če vse skupaj posplošim, Padding določa položaj elementov na spletni strani.

Položaji (ang. Padding)
Lastnosti Height in Width imajo sledeče vrednosti:

Vrednosti OPIS
auto brskalnik izračuna margin samostojno, in prilagodi na spletni strani
length določimo padding v px, pt ali cm
inherit višina in širina bosta podedovali od parent vrednosti
% padding določimo v odstotkih
initial višino in širino nastavi na privzeto vrednost

DIV element ima top padding 50px, bottom padding 50px, left padding jih ima 80px in right padding 20px

Kako deluje padding si lahko predstavljamo na način škatle, v katero lahko s pomočjo položaja (ang. Padding) dodamo še eno škatlo, če vzamemo škatlo za primer. Če želimo obdržati širino na 300px, ne gleda na količino položaja, lahko uporabimo lastnost box-sizing. Zaradi te lastnosti bo element ohranil svojo širino, če pa bi povečali padding, se bo razpoložljiv prostor zmanjšal.

Lastnosti OPIS
padding v padding lahko vpišem vse štiri lastnosti skupaj
padding-top nastavim spodnji padding
padding-left nastavim levi padding
padding-right nastavim desni padding
padding-bottom nastavim spodnji padding

Padding primeri:

DIV element ima top padding 50px, bottom padding 50px, left padding jih ima 80px in right padding 20px

Širina div je 300px, zlate barve

Širina div je 350, tudi če je definirano 300px, dodal sem še padding, in je modre barve.

Širina div je 300px, zlate barve

Širina div je 350, tudi če je definirano 300px, dodal sem še padding, in je modre barve.

Širina div ostaja 300px, kljub dodanemu paddingu. Ker sem dodal padding pomeni dodatnih 50px več, 25px na levi strani in 25px na desni, ampak sem uporabil box-sizing in širina ostaja nespremenjena.

Skrajšanje kode, pomeni top==25px, right==50px, bottom==75px in left padding je 100px

Uporabil sem individualen način
Nastavil sem Padding na: Top 50px, Right 30px, Bottom 50px in Left 80px

Padding SLIKA

Padding SLIKA

Združil sem glavo, odstavek in sliko vse v en div, s pomočjo položajev.