CSS Padding Tutorial in Hindi – Part 7

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

CSS Padding का इस्तेमाल element के आसपास space बनाने के लिए किया जाता है और यह element के define किये border के अन्दर ही space को define करता है. यह CSS Margin से अलग है क्योंकि margin define border से बाहर के space को define करता है.

जिस प्रकार हम margin property का इस्तेमाल अलग अलग कर सकते है उसी प्रकार हम padding property का इस्तेमाल कर सकते है.

• padding-top
• padding-right
• padding-bottom
• padding-left

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

Example

div{
    padding-top: 30px;
    padding-bottom: 50px;
    padding-right: 90px;
    padding-left: 80px;
}

Example

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

Example

div{
    padding: 25px 50px 75px 100px;
}

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

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

Example 2

div{
    padding : 25px 50px 75px;
}

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

Example 3

div{
    padding: 25px 75px;
}

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

Example 4

div{
    padding: 75px;
}

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

CSS Height & Width Tutorial in Hindi – Part 8>>>>>>>>

इसे भी पढ़े – OPPO RealMe 1 Full Specification & Price In India