Proprietatea margin

Proprietatea margin stabilește marginea externă a elementului. Valoarea proprietății poate fi orice unitate de măsură pentru dimensiuni sau cuvântul-cheie auto, care permite browserului să calculeze automat marginea elementului. Implicit, fiecare browser poate adăuga elementelor margini diferite.

Această proprietate este o prescurtare pentru proprietățile margin-top, margin-right, margin-bottom, margin-left.

Sintaxă

selector {
	margin: valoare;
}

Numărul de valori

Proprietatea margin acceptă 1, 2, 3 sau 4 valori, enumerate prin spațiu:

Număr	Descriere
`1`	O valoare stabilește marginea din toate părțile elementului.
`2`	Prima valoare stabilește marginea de sus și de jos, iar a doua - din dreapta și din stânga.
`3`	Prima valoare stabilește marginea de sus, a doua - din dreapta și din stânga, iar a treia - de jos.
`4`	Prima valoare stabilește marginea de sus, a doua - din dreapta, a treia - de jos, iar a patra - din stânga.

Exemplu

Acum vom avea un bloc fără margini:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 0;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

Exemplu

Acum vom stabili pentru bloc o margine de 10px:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 10px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

Exemplu

Vom stabili pentru bloc o margine de 10px de sus și de jos și de 20px - din stânga și din dreapta:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 10px 20px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

Exemplu

Vom stabili pentru bloc o margine de 5px de sus, 15px din dreapta, 25px de jos și 35px din stânga:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 5px 15px 25px 35px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

Vedeți și

proprietatea padding,
care stabilește padding-ul (spațiul intern)