Mala šola CSS-ja III.: Padding / Margin

CSS_sola_imageVeliko ljudi zamenjuje CSS značke “padding” in “margin”. Razumevanje obeh značk je temeljnega pomena pri uporabi CSS-ja.

Padding predstavlja notranji prostor elementa, margin pa zunanji prostor elementa. Razlika med njima se lepo vidi, ko testiramo na samem primeru. Ustvarimo dva polja(DIV) z obrobo in enemu dodamo padding drugemu pa margin.

Primer:
CSS-sola_padding-margin

Primer kode:

<div style="width:250px; border:#CCCCCC 1px solid; padding: 10px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>

<br /><br />

<div style="width:250px; border:#CCCCCC 1px solid; margin: 10px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Padding element

CSS-sola_padding

Margin elementa

CSS-sola_margin

Atributi se dodelujeo v smiri urinega kazalca -> zgoraj, desno, spodaj in levo.

 
Dodeljevanje vrednosti
Vrednost zapisa padding in margin se ponavadi piše:
padding: 10px 5px 10px 5px;,
margin: 10px 5px 10px 5px;.

Celoten zapis lahko skrajšamo, če sta zgornji in spodnji rob in desni in levi enaka:
padding: 10px 5px;,
margin: 10px 5px;.

Če imamo vse robe enake je zapis lahko tudi:
padding: 5px;,
margin: 5px;.

Padding lahko dodajamo tudi posamezno s pomočjo ukazov padding-top, paddign-right, padding-bottom in padding-left. Enako velja za margin – margin-top, …

 

POMEMBNO

Če imamo element širok 100px in njemu dodamo padding 25px na levi in desni rob. Se bo celotna velikost elementa povečala za 50px, se pravi iz 100px na 150px.

Margin razširi okvir, ne vpliva pa neposredno na velikost elementa.

Komentiraj


*