Sifa margin

Sifa margin inaweka padding ya nje ya kipengele. Thamani ya sifa inaweza kuwa yoyote ya vitengo vya ukubwa au sifa muhimu auto, inayomruhusu kivinjari kukokotoa padding ya kipengele peke yake. Kwa msingi, kila kivinjari kinaweza kuongeza padding mbalimbali kwa vipengele.

Sifa hii ni kifupi cha sifa margin-top, margin-right, margin-bottom, margin-left.

Syntax

kichagua {
	margin: thamani;
}

Idadi ya maadili

Sifa margin inakubali 1, 2, 3 au 4 maadili, yakiorodheshwa kwa nafasi:

Idadi	Maelezo
`1`	Thamani moja huweka padding pande zote za kipengele.
`2`	Thamani ya kwanza huweka padding juu na chini, na ya pili - kulia na kushoto.
`3`	Thamani ya kwanza huweka padding juu, ya pili - kulia na kushoto, na ya tatu - chini.
`4`	Thamani ya kwanza huweka padding juu, ya pili - kulia, ya tatu - chini, na ya nne - kushoto.

Mfano

Sasa tutakuwa na block bila padding:

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

Mfano

Sasa tuweke padding ya 10px kwa block:

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

Mfano

Tuweke padding ya 10px juu na chini na 20px - kushoto na kulia:

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

Mfano

Tuweke padding ya 5px juu, 15px kulia, 25px chini na 35px kushoto:

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

Angalia pia

sifa padding,
ambayo huweka padding ya ndani