CSS margin i padding

Margine su prazan prostor izmedju border dela i okolnih elemenata. Pomoću atributamargin se definiše veličina praznog prostora svuda oko border. Obzirom da border ima 4 strane postoji mogućnost da se zasebno odredi veličina praznog prostora oko sve 4 strane i to redom: margin-bottom definiše prazan prostor ispod donje ivice; margin-top definiše iznad gornje ivice; margin-left levo od leve ivice i; margin-right desno.

Svi ovi atributi, znači i margin, i margin-left, margin-right, margin-top i margin-bottom mogu imati sledeće vrednosti:

auto - defaultna vrednost koju dodeljuje sam brauzer
dužina - na primer u pikselim, milimetrima, itd , znaci sve CSS merne jedinice
dužina u procentima - procenat u odnosu na širinu elementa

Evo primera koji sve objašnjava:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head> <style type="text/css"> p {background-color: yellow;} p.margine { margin-top: 85px; margin-bottom: 50px; margin-right: 500px; margin-left: 25px; } </style></head><body> <p>Ovo je pasus bez ikakvih margina</p> <p class=margine>Ovo je sa marginama koje su različite u svim pravcima</p> <p>Ovo je pasus bez ikakvih margina</p> </body></html>

Ovo je pasus bez ikakvih margina

Ovo je sa različitim marginama

Ovo je pasus bez ikakvih margina

Ako nam se veličina praznina razlikuje samo po horizontali u odnosu na vertikalu, što znači da su leva i desna iste , kao i gornja i donja onda to možemo kraće zapisati i ovako: margin:80px 40px . Stim što se 80 odnosi na dužinu vertikalnih a 40 na dužinu horizontalnih praznina.

Padding, za razliku od margin, definiše unutrašnje praznine izmedju sadržaja i bordera. Padding što se tiče obeležavanja atributa i njihovih vrednosti je potpuno isti kao i margin, samo umesto margin pišete padding, ovako: padding - definiše prazan prostor izmedju sadržaja i bordera u svim pravcima podjednako; padding-left - definiše veličinu praznog prostora levo od sadržaja i ivice; padding-right - desno; padding-top - gored i; padding-bottom - dole. Evo primera koji sve lepo dočarava.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head> <style type="text/css"> p.padng { width: 300px; border: 4px solid blue; padding-top: 5px; padding-bottom: 25px; padding-right: 50px; padding-left: 100px; } </style></head><body> <p class=padng>Ovo je sa padding koji su različite u svim pravcima</p> </body></html>

Ovo je sa padding koji su različite u svim pravcima

Takodje i ovde važi ona priča da ako trebamo definisati prostor samo po horizontali i vertikali onda pišemo padding: 30px 50px gde 50px definiše left i right praznine, a 30px top i bottom.