Margin-ominaisuus

Ominaisuus margin asettaa elementin ulkoisen marginaalin. Ominaisuuden arvona voivat olla mikä tahansa koot yksiköt tai avainsana auto, jonka ansiosta selain laskee elementin marginaalin automaattisesti. Oletusarvoisesti jokainen selain voi lisätä elementeihin erilaisia marginaaleja.

Ominaisuus on lyhenne ominaisuuksille margin-top, margin-right, margin-bottom, margin-left.

Syntaksi

valitsija {
	margin: arvo;
}

Arvojen määrä

Ominaisuus margin hyväksyy 1, 2, 3 tai 4 arvoa, lueteltuna välilyönnillä erotettuna:

Määrä	Kuvaus
`1`	Yksi arvo asettaa marginaalin elementin kaikilta sivuilta.
`2`	Ensimmäinen arvo asettaa marginaalin ylhäältä ja alhaalta, ja toinen - oikealta ja vasemmalta.
`3`	Ensimmäinen arvo asettaa marginaalin ylhäältä, toinen - oikealta ja vasemmalta, ja kolmas - alhaalta.
`4`	Ensimmäinen arvo asettaa marginaalin ylhäältä, toinen - oikealta, kolmas - alhaalta, ja neljäs - vasemmalta.

Esimerkki

Nyt meillä on lohko ilman marginaaleja:

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

Esimerkki

Asetetaan nyt lohkolle marginaali 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;
}

Esimerkki

Asetetaan lohkolle marginaali 10px ylhäältä ja alhaalta ja 20px - vasemmalta ja oikealta:

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

Esimerkki

Asetetaan lohkolle marginaali 5px ylhäältä, 15px oikealta, 25px alhaalta ja 35px vasemmalta:

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

Katso myös

ominaisuus padding,
joka asettaa sisäisen marginaalin