margin ගුණය

margin ගුණය මූලද්‍රව්‍යයක බාහිර ඉඩ සකසයි. ගුණයේ අගය විය හැක්කේ ඕනෑම ප්‍රමාණය සඳහා ඒකක හෝ යතුරු ගුණය auto, මූලද්‍රව්‍යයේ ඉඩ ගණනය කිරීම බ්‍රවුසරයට ඉඩ දෙයි. පෙරනිමිය ලෙස සෑම බ්‍රවුසරයකටම මූලද්‍රව්‍යවලට විවිධ ඉඩ එකතු කළ හැකිය.

මෙම ගුණය වන්නේ margin-top, margin-right, margin-bottom, margin-left ගුණ සඳහා කෙටි යෙදුමකි.

වාක්‍ය රීතිය

තේරුම් ගන්නා {
	margin: අගය;
}

අගයන්ගේ සංඛ්‍යාව

margin ගුණය 1, 2, 3 හෝ 4 අගයක් ගනී, විරාමයෙන් බෙදා ලැයිස්තුගත කර ඇත:

සංඛ්‍යාව	විස්තරය
`1`	එක් අගයක් මූලද්‍රව්‍යයේ සෑම පැත්තකින්ම ඉඩ සකසයි.
`2`	පළමු අගය ඉහළින් සහ පහළින් ඉඩ සකසයි, දෙවැන්න - දකුණේ සහ වමේ.
`3`	පළමු අගය ඉහළින් ඉඩ සකසයි, දෙවැන්න - දකුණේ සහ වමේ, තෙවැන්න - පහළින්.
`4`	පළමු අගය ඉහළින් ඉඩ සකසයි, දෙවැන්න - දකුණේ, තෙවැන්න - පහළින්, සහ හතරවැන්න - වමේ.

උදාහරණය

දැන් අප සතුව ඉඩ නොමැති බ්ලොක් එකක් ඇත:

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

උදාහරණය

දැන් අපි බ්ලොකයට 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;
}

උදාහරණය

අපි බ්ලොකයට 10px ඉහළින් සහ පහළින් සහ 20px - වමට සහ දකුණට ඉඩක් ලබා දෙමු:

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

උදාහරණය

අපි බ්ලොකයට 5px ඉහළින්, 15px දකුණට, 25px පහළින් සහ 35px වමට ඉඩක් ලබා දෙමු:

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

මෙයද බලන්න

padding ගුණය,
එය අභ්‍යන්තර ඉඩ සකසයි