IZRADA SAJTA za 10 €

Home   FORUM   Toplista   HTML   CSS   JavaScript   PHP   DIZAJN   SEO   Mapa


KONTAKT
izuzetan[at]gmail.com






TOP LISTA SAJTOVA
Igrice
Slike

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&#269;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.

Copyright © 2010 BUbaj. Powered By bubaj.com
CSS    CSS osnove    CSS stil    CSS box model    CSS display