इस Tutorial में हम आपको CSS Margin Property in Hindi के बारे में पूरी जानकारी देंगे. आप जानेंगे कि CSS Margin क्या होता हैं – What is CSS Margin in Hindi? अध्ययन की सुविधा के लिए हमने इस Tutorial को निम्न भागों में बांटा हैं.
Element के बाहर Browser Window के बीच के खाली स्थान को Margin कहा जाता हैं. Margin दो Elements के बीच भी उपस्थित रहता हैं.
Margin भी CSS Box Model का एक महत्वपूर्ण हिस्सा हैं. जिसकी सहायता से Element के चारों तरफ खाली जगह यानि Space को Define किया जाता हैं. किसी Element का Margin उस Element की Webpage में Position को निर्धारित करता हैं.
Margin का प्रभाव Readability पर भी पढता हैं. अगर Elements के बीच उपयुक्त Margin रहता हैं तो Users को पढने में परेशानी नही रहती हैं और वे पढना पसंद करते हैं. इसलिए Margin किसी Website या Blog की पठनीयता को भी प्रभावित करता हैं.
आप Element के लिए Individually चारों तरफ से Margin Set कर सकते हैं. जिससे उसकी Top, Bottom, Left, Right Sides से Position निर्धारित हो जाती है. Margin Value को Length, Percentage, Auto एवं Inherit द्वारा Define किया जा सकता हैं.
विभिन्न प्रकार की Margin Property
Margin का संबंध Element Position और Readership से भी होता हैं. इसलिए Margin को Control करने के लिए CSS द्वारा कई Properties उपलब्ध करवाई गई हैं. जिनके बारे में नीचे बताया जा रहा हैं.
Margin-top Property
इस Property द्वारा किसी Element के लिए Top से Margin को Set किया जाता हैं. मतलब ऊपर से Element और Element Container या Browser Window के बीच कितना खाली स्थान रहेगा. आइए इसे एक उदाहरण द्वारा समझते हैं.
इसे Try कीजिए
<!DOCTYPE html> <html> <head> <title>CSS Top Margin Examples</title><style type=”text/css”> p { margin-top: 100px; border: 2px solid red; }
</style> <body> <p>This is a Paragraph. This paragraph text has written in English. This paragraph top Margin is 100px and has a red border with 2px.</p> </body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This is a Paragraph. This paragraph text has written in English. This paragraph top Margin is 100px and has a red border with 2px.
Margin-right Property
इस Property द्वारा किसी Element के लिए Right Margin को Set किया जाता हैं. मतलब Browser Window के दांई तरफ से Element और Element Container के बीच कितना खाली स्थान रहेगा. आइए इसे एक उदाहरण द्वारा समझते हैं.
इसे Try कीजिए
<!DOCTYPE html> <html> <head> <title>CSS Right Margin Examples</title><style type=”text/css”> p { margin-right: 100px; border: 2px solid red; }
</style> <body> <p>This is a Paragraph. This paragraph text has written in English. This paragraph right Margin is 100px and has a red border with 2px.</p> </body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This is a Paragraph. This paragraph text has written in English. This paragraph right Margin is 100px and has a red border with 2px.
Margin-bottom Property
इस Property द्वारा किसी Element के लिए Bottom से Margin को Set किया जाता हैं. मतलब नीचे से Element और Element Container के बीच कितना खाली स्थान रहेगा. आइए इसे एक उदाहरण द्वारा समझते हैं.
</style> <body> <p>This is a Paragraph. This paragraph text has written in English. This paragraph bottom Margin is 100px and has a red border with 2px.</p> </body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This is a Paragraph. This paragraph text has written in English. This paragraph bottom Margin is 100px and has a red border with 2px.
Margin-left Property
इस Property द्वारा किसी Element के लिए Left Margin को Set किया जाता हैं. मतलब Browser Window के बांई तरद से Element और Element Container के बीच कितना खाली स्थान रहेगा. आइए इसे एक उदाहरण द्वारा समझते हैं.
इसे Try कीजिए
<!DOCTYPE html> <html> <head> <title>CSS Top Margin Examples</title><style type=”text/css”> p { Margin-left: 100px; border: 2px solid red; }
</style> <body> <p>This is a Paragraph. This paragraph text has written in English. This paragraph left Margin is 100px and has a red border with 2px.</p> </body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This is a Paragraph. This paragraph text has written in English. This paragraph left Margin is 100px and has a red border with 2px.
Margin Property
यह Margin की Shorthand Property होती हैं. जिसके द्वारा एक बार में ही सभी तरफ की Margin Declare की जाती हैं. जब इस Property द्वारा Margin Declare की जाती हैं तब Margin का क्रम इस प्रकार रहता हैं.
Margin-top
Margin-right
Margin-bottom
Margin-left
आइए ये Margin किस प्रकार अपना काम करती हैं.
जब Margin में चार Value Declare की जाती है. जैसे; margin: 5px 10px 15px 20px; तब
Top Margin 5px होगी.
Right Margin 10px होगी.
Bottom Margin 15px होगी.
Left Margin 20px होगी.
p { margin: 5px 10px 15px 20px; }
जब Margin में तीन Value Declare की जाती है. जैसे; margin: 5px 10px 20px; तब
Top Margin 5px होगी.
Right और Left Margin 10px होगी.
Bottom Margin 20px होगी.
p { margin: 5px 10px 20px; }
जब Margin में दो Value Declare की जाती है. जैसे; margin: 5px 10px; तब
Top और Bottom Margin 5px होगी.
Right और Left Margin 10px होगी.
p { margin: 5px 10px; }
जब Margin में एक Value Declare की जाती है. जैसे; margin: 5px; तब
अब चारो Margin 5px की होगी.
p { margin: 5px; }
Margin Auto Value
Margin की auto Value द्वारा Element को उसके Container में Horizontally Center कर सकते हैं. इस स्थिति में Element की Width और बाकि Space Left और Right Margin में बराबर बांट दिया जाता हैं. इसे एक उदाहरण से समझिए.
माना एक Container हैं जिसकी Width 1000px है. इस Container में एक 400px Width का div Element हैं. तो जब इस Element की Value को auto Set की जाएगी तो यह Element Container के बीचों-बीच आ जाएगा. जिसमें बाकि जगह क्रमश: Right और Left Margin द्वारा बराबर बांट ली जाएगी.
इसे Try कीजिए
<!DOCTYPE html> <html> <head> <title>Margin auto Value Examples</title><style type=”text/css”> div { width: 400px; border: 2px solid red;margin:auto; }
</style> <body> <div>This is a Paragraph under a division. This paragraph text has written in English. This paragraph Margin is auto and has a red border with 2px.</div> </body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This is a Paragraph. This paragraph text has written in English. This paragraph Margin is auto and has a red border with 2px.
आपने क्या सीखा?
इस Tutorial में आपने CSS Margin Property के बारे में जाना हैं. इसके अलावा आपने Margin को अलग-अलग प्रकार से Declare करना भी सीखा हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.
