मार्जिन गुण

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 गुण,
जो आंतरिक मार्जिन सेट करता है