CSS Margin Tutorial in Hindi

आज इस आर्टिकल में हम आपको CSS Margin Tutorial in Hindi – Part 6 के बारे में बता रहे है.

CSS के margin property का इस्तेमाल element के चारों ओर space बनाने के लिए किया जाता है.
यह element के बाहर और किसी define किये border के बाहर space बनाने के लिए इस्तेमाल होता है.

ज्यादातर margin की अलग अलग property का इस्तेमाल किया जाता है
जैसे अगर हमने किसी element में टॉप से margin चाहिए या फिर किसी दूसरी side से.

margin-top
margin-right
margin-bottom
margin-left

इन चार अलग अलग property का इस्तेमाल करके हम किसी भी element की किसी भी side में space add कर सकते है. इनकी value हम auto, px, mm, em और % में दे सकते है और इनकी value नेगेटिव भी रखी जा सकती है.

Contents hide

7 CSS Padding Tutorial in Hindi – Part 7>>>>>>

Example

h1{
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}

ऊपर तो हमने आपको अलग अलग property का इस्तेमाल करने के बारे में बताया है.
लेकिन अगर आप इसका इस्तेमाल एक साथ करना चाहते है तो ऐसा भी कर सकते है.
इसके लिए आपको उसके side की property इस्तेमाल करने की जरूरत नही है.

1Example

h1{
margin: 25px 50px 75px 100px;
}

इस प्रकार हम सभी value एक साथ दे कर चारों तरफ के margin को सेट कर सकते है.

अगर हम margin property में चार value देते है तो सबसे पहली value top margin सेट करती है दूसरी value right margin सेट करती है तीसरी value bottom margin को सेट करती और सबसे लास्ट में लिखी गयी value left side के margin को सेट करती है.

2 Example

h1{
margin: 25px 50px 75px;
}

अगर हम margin में 3 ही value देते है तो सबसे पहली value top margin सेट करती है दूसरी value right और left margin सेट करती है और सबसे लास्ट में लिखी गयी value bottom side के margin को सेट करती है.

3 Example

h1{
margin: 25px 75px;
}

अगर हम margin में 2 ही value देते है तो सबसे पहली value top और bottom margin सेट करती है और दूसरी value right और left margin सेट करती है.

4 Example

h1{
margin: 75px;
}

अगर हम सिर्फ एक value ही margin को देते है तो चारों side एक ही value automatic सेट हो जाती है और आपको सभी तरफ से समान margin मिलता है.

5 Example

h1{ width:300px;
margin: auto;
}

इसका इस्तेमाल तब किया जाता है जब आपको किसी element को horizontally center में align करना हो. लेकिन एक बात का ध्यान रखे इसके लिए आपको उस element की width define करनी बहुत जरुरी है इसके बिना margin की auto value काम नही करेगी.

CSS Padding Tutorial in Hindi – Part 7>>>>>>

इसे भी पढ़े – CSS Border Tutorial in Hindi – Part 5

CSS Margin Tutorial in Hindi – Part 6