CSS Margin property और Values कहाँ और कैसे use करें
इस आर्टिकल में हम css margin property के बारे में विस्तार से बात करेंगे। Margin property का प्रयोग हम कहाँ और किस प्रकार कर सकते है ? इसका प्रयोग क्यों किया जाता है ? इन सब सवालों के जवाब आपको इस पोस्ट में मिल जाएंगे।
CSS Margin Property का उपयोग किसी element के चारों तरफ या किसी border के बाहर space देने के लिए किया जाता है। CSS में आपके पास margin को set करने का पूरा control होता है।
All CSS Margin Property
CSS में element की हर side के लिए आप अलग-अलग properties का प्रयोग कर सकते हो।
1. margin-top:- किसी element की top margin को set करने के लिए इसका उपयोग होता है।
2. margin-right:- एक element की right margin को define करने के लिए इसका उपयोग होता है।
3. margin-bottom:- किसी element की bottom margin को set करने के लिए इसका उपयोग होता है।
4. margin-left:-इस property में element की left margin को set किया जाता है।
Shorthand CSS Margin Property
Margin की चारों properties (margin-top, margin-left, margin-bottom and margin-right ) को shorthand यानि एक साथ declare करने के लिए margin का प्रयोग किया जाता है। इस से आप एक लाइन में top, left , bottom और right margin के लिए अलग अलग values दे सकते हो।
उदाहरण के लिए:-
अगर margin property में 4 वैल्यूस दी गई हो
<html>
<head>
<style>
div {
width:300px;
margin: 50px 50px 75px 90px;
border: 1px solid red;
background-color:skyblue;
}
</style>
</head>
<body>
तो ये output इस प्रकार काम करेगी।
top margin-50px
right margin- 50px
bottom margin- 75px
left margin- 90px
अगर margin property की 3 values दी गई हो तो जैसे-margin: 10px 20px 30px;
तो result इस प्रकार होगा
top margin- 10px
right and left margin- 20px
bottom margin- 30px
यदि margin property की 2 ही value दी गई हो जैसे-margin: 10 px 20 px; तो ये इस प्रकार काम करेगी:-
top और bottom margin 10px होगी।
right और left margin 20 px होगी।
अगर margin property की सिर्फ एक ही value को specify किया गया हो तो सभी चारों margin (top margin, left margin , bottom and right margin) 20px होगी।
CSS Margin property values
CSS में आपको margin property के ऊपर पूरा control दिया जाता है ताकि आप अपनी रुचि के अनुसार margin को set कर सको। आप नीचे दी गई कोई भी वैल्यू दे सकते हो।
CSS Syntax
margin: length |auto | initial| inherit;
lenth value – आप मार्जिन को lenth values में भी specify कर सकते हो। CSS में lenth वैल्यू को px, pt, cm आदि में define किया जा सकता है। इसके लिए by default वैल्यू 0 होती है। आप मार्जिन को negative values भी दे सकते हो ।
% value – Containing element की width के हिसाब से left margin को % वैल्यू में define किया जाता है।
auto value – किसी element को इसके container के साथ horizonatally center में दिखाने के लिए margin में auto value का प्रयोग किया जाता है। इसमें element उतनी ही width लेगा जितनी specify की गई हो। बाकी बच हुआ space समान रूप से left और right margin में बंट जाता है।
CSS Background हिन्दी में सीखें
CSS Color property को कैसे use किया जाता है-हिन्दी में
Margin collapse value
कई बार किसी element की टॉप और bottom margin एक single margin में collapse हो जाती है। जो दी गई दो margins में जो सबसे ज्यादा होती है उसके अनुसार show करती है। Margin collapse सिर्फ top और bottom margin में होता है। Left और right margin में ऐसा नहीं होता ।
CSS Selector क्या है और इसका use कैसे किया जाता है?
3 ways to insert CSS-किसी webpage में CSS कैसे Add करें
CSS Border Property का प्रयोग कैसे करें- हिन्दी मे पूरी जानकारी
Example :-
<html>
<head><style>
h2 { margin-bottom: 30px;background-color: red;}
h3 {margin-top:60px;background-color: blue;}
</style>
</head>
<body>
<h2> This Heading has 30px margin from bottom</h2>
<h3>This Heading has60px margin from top</h3>
</body>
</html>
Output
इसमें H1 element की bottom margin 30 px है और H2 element की top margin 60 px है। सामान्य रूप से H1 और H2 के बीच में टोटल margin 90 px (30 px +60 px ) होनी चाहिए। परंतु margin-collapse के कारण दोनों के बीच में सिर्फ 60 px margin ही होगी।
इस आर्टिकल में आपने css margin property और उसकी values के बारें में पढ़ा। उम्मीद करता हूँ ये आपको समझ में अच्छी तरह से आ गया होगा। अगर आपको किसी भी प्रकार की कोई problem आ रही हो तो आप कमेन्ट करके पूछ सकते हो।
About Author
Sant Lal
My Name is Sant Lal From Haryana India.I am a part time blogger and always share usefull information for visiter.I want to help people about blogging, SEO and making money. Aap mujhe support de aur jyada se jyada apne dosto ke sath share kre. Google Plus