Właściwość margin

Właściwość margin ustawia zewnętrzny odstęp elementu. Wartością właściwości są dowolne jednostki wymiarów lub kluczowa właściwość auto, pozwalająca przeglądarce samodzielnie obliczać odstęp elementu. Domyślnie każda przeglądarka może dodawać elementom różne odstępy.

Właściwość jest skrótem dla właściwości margin-top, margin-right, margin-bottom, margin-left.

Składnia

selektor {
	margin: wartość;
}

Liczba wartości

Właściwość margin przyjmuje 1, 2, 3 lub 4 wartości, wymieniane z spacją:

Liczba	Opis
`1`	Jedna wartość ustawia odstęp ze wszystkich stron elementu.
`2`	Pierwsza wartość ustawia odstęp od góry i od dołu, a druga - od prawej i od lewej.
`3`	Pierwsza wartość ustawia odstęp od góry, druga - od prawej i od lewej, a trzecia - od dołu.
`4`	Pierwsza wartość ustawia odstęp od góry, druga - od prawej, trzecia - od dołu, a czwarta - od lewej.

Przykład

Teraz będziemy mieli blok bez odstępów:

<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;
}

Przykład

A teraz blokowi ustawimy odstęp 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;
}

Przykład

Ustawmy blokowi odstęp 10px od góry i od dołu oraz 20px - od lewej i od prawej:

<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;
}

Przykład

Ustawmy blokowi odstęp 5px od góry, 15px od prawej, 25px od dołu i 35px od lewej:

<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;
}

Zobacz też

właściwość padding,
która ustawia wewnętrzny odstęp