सीएसएस पैडिंग

इस तत्व का आंतरिक पैडिंग 70px है。

सीएसएस पैडिंग

CSS padding प्रतियोगिता का उपयोग किसी निर्धारित सीमा के भीतर तत्व के सामग्री के चारों ओर अंतराल बनाने के लिए किया जाता है。

CSS के द्वारा, आप पूरी तरह से आंतरिक पैडिंग (फ़ुल) को नियंत्रित कर सकते हैं। कुछ प्रतियोगिताएँ तत्व के प्रत्येक किनारे (ऊपर, दायाँ, नीचे और बाईं) के लिए आंतरिक पैडिंग सेट कर सकती हैं。

Padding - अलग-अलग किनारा

CSS तत्व के प्रत्येक बाहरी किनारे के लिए आंतरिक पैडिंग निर्दिष्ट करने के लिए प्रतियोगिताएँ हैं:

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

सभी आंतरिक पैडिंग प्रतियोगिताएँ निम्नलिखित मूल्यों को सेट कर सकती हैं:

  • length - px, pt, cm आदि इकाइयों में आंतरिक पैडिंग निर्दिष्ट करता है
  • % - आगे के तत्व की चौड़ाई के प्रतिशत के आधार पर आंतरिक पैडिंग निर्दिष्ट करता है
  • inherit - आगे के तत्व से आंतरिक पैडिंग ले लेने के लिए निर्दिष्ट करता है

सूचना:नकारात्मक मूल्यों को अनुमति नहीं है。

उदाहरण

डीवी तत्व के सभी चार बाहरी किनारों को अलग-अलग आंतरिक पैडिंग सेट करने के लिए:

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

अपने आप प्रयास करें

Padding - लघुरूप प्रतियोगिता

कोड को कम करने के लिए, सभी आंतरिक पैडिंग प्रतियोगिता में एक अभियोगता में निर्दिष्ट किया जा सकता है。

padding गुण निम्नलिखित आंतरिक अंतराल गुणों का लघुगुण है:

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

कामकाज के तरीका यह है:

अगर padding गुण को चार मान सेट किया गया है:

  • padding: 25px 50px 75px 100px;
    • ऊपर आंतरिक अंतराल 25px है
    • दायाँ आंतरिक अंतराल 50px है
    • नीचे आंतरिक अंतराल 75px है
    • लेफ्ट आंतरिक अंतराल 100px है

उदाहरण

चार मान सेट करने वाले padding लघुगुण का उपयोग करके:

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

अपने आप प्रयास करें

अगर padding गुण को तीन मान सेट किया गया है:

  • padding: 25px 50px 75px;
    • ऊपर आंतरिक अंतराल 25px है
    • दायाँ और लेफ्ट आंतरिक अंतराल 50px हैं
    • नीचे आंतरिक अंतराल 75px है

उदाहरण

तीन मान सेट करने वाले padding लघुगुण का उपयोग करके:

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

अपने आप प्रयास करें

अगर padding गुण को दो मान सेट किया गया है:

  • padding: 25px 50px;
    • ऊपर और नीचे आंतरिक अंतराल 25px हैं
    • दायाँ और लेफ्ट आंतरिक अंतराल 50px हैं

उदाहरण

दो मान सेट करने वाले padding लघुगुण का उपयोग करके:

div {
  padding: 25px 50px;
}

अपने आप प्रयास करें

अगर padding गुण को एक मान सेट किया गया है:

  • padding: 25px;
    • सभी चार आंतरिक अंतराल 25px हैं

उदाहरण

एक मान सेट करने वाले padding लघुगुण का उपयोग करके:

div {
  padding: 25px;
}

अपने आप प्रयास करें

आंतरिक अंतराल और एलेमेंट चौड़ाई

CSS width गुण एलेमेंट के सामग्री क्षेत्र की चौड़ाई को निर्दिष्ट करता है। सामग्री क्षेत्र एलेमेंट (बॉक्स मॉडल) के आंतरिक अंतराल, किनारा और बाह्य अंतराल के भीतर का हिस्सा है।

इसलिए, अगर एलेमेंट को निर्दिष्ट चौड़ाई दी गई है, तो आंतरिक अंतराल जोड़ने से एलेमेंट की कुल चौड़ाई बढ़ जाएगी। यह अक्सर अचाहित परिणाम है।

उदाहरण

यहाँ, <div> एलेमेंट की चौड़ाई 300px है। लेकिन, <div> एलेमेंट की वास्तविक चौड़ाई 350px (300px + लेफ्ट padding 25px + दायाँ padding 25px) होगी:

div {
  width: 300px;
  padding: 25px;
}

अपने आप प्रयास करें

अगर आप 300px चौड़ाई को बनाए रखना चाहते हैं, तो आप किसी भी फुलाने के बिना: box-sizing गुण। इससे एलेमेंट की चौड़ाई बनी रहेगी। अगर आंतरिक अंतराल बढ़ाया जाए तो उपलब्ध सामग्री जगह कम हो जाएगी。

उदाहरण

box-sizing गुण का उपयोग करके 300px चौड़ाई को बनाए रखें, जिससे फुलाना किया जाए:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

अपने आप प्रयास करें

और अधिक उदाहरण

लेफ्ट आंतरिक अंतराल सेट करना
इस उदाहरण में, <p> एलेमेंट के लेफ्ट आंतरिक अंतराल को सेट करने के तरीके दिखाया गया है。
दायाँ आंतरिक अंतराल सेट करना
इस उदाहरण में, <p> एलेमेंट के दायाँ आंतरिक अंतराल को सेट करने के तरीके दिखाया गया है。
ऊपर आंतरिक अंतराल सेट करना
इस उदाहरण में, <p> एलेमेंट के ऊपर आंतरिक अंतराल को सेट करने के तरीके दिखाया गया है。
नीचे आंतरिक अंतराल सेट करना
इस उदाहरण में, <p> एलेमेंट के नीचे आंतरिक अंतराल को सेट करने के तरीके दिखाया गया है。

सभी CSS आंतरिक अंतराल गुण

गुण वर्णन
padding सभी आंतरिक अंतराल गुणों को एक ही व्यक्तव्य में सेट करने के लिए लघुगुण
padding-bottom एलेमेंट के नीचे आंतरिक अंतराल को सेट करें。
padding-left एलेमेंट के लेफ्ट आंतरिक अंतराल को सेट करें。
padding-right एलिमेंट की दायाँ इनर पैडिंग सेट करें。
padding-top एलिमेंट की ऊपरी इनर पैडिंग सेट करें。

अधिक वांचना

ऑफ़डर बुक:बॉक्स मॉडल: CSS इनर पैडिंग