CSS Osnove

MARGIN

Sve što smo naveli za padding, važi i za prostor predstavljen na slici kao margin.

CSS-struktura-5

Sintaksna razlika je u tome što ćete svuda umesto reči padding pisati reč margin, sve ostalo ostaje isto.

Ako pogledamo primer iznad, sintaksno, to bi izgledalo ovako:

div{margin-top: 5px;}

div{margin-right: 8px;}

div{margin-bottom: 6px;}

div{margin-left: 4px;}

ili zbirno:

div{margin:5px 8px 6px 4px;}

Ipak, postoje značajne razlike izmedju padding i margin. To su:

  • Padding NE može imati negativnu vrednost dok margin može.
  • Padding sadrži pozadinsku boju ili sliku elementa dok je margin transparentan
  • Margin udaljava element od drugih elemenata u dokumentu dok padding definiše udaljenost sadržaja od unutrašnje ivice elementa.

Pogledajmo primer

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″>

<title>Pozicioniranje elemenata kreiranjem DIV-ova</title>

<style>

img{padding:10px;margin:10px;border:5px solid red;background-color:yellow;}

div{margin:0px;padding:0px;border:1px solid black;width:151px;height:117px;}

</style>

</head>

<body>

<div>

<img src=”kafe1.jpg”>

</div>

</body>

</html>

CSS-struktura-6

Preporučite ovaj članak:
Email this to someoneShare on Google+Share on FacebookShare on LinkedIn