HTML DOM Style padding प्रॉपर्टी

style.padding प्रॉपर्टी क्या है?

HTML DOM style.padding प्रॉपर्टी किसी तत्व के सभी तरफ के पैडिंग (आंतरिक स्थान) को एक साथ प्राप्त या सेट करने के लिए एक शॉर्टहैंड प्रॉपर्टी है। यह CSS padding शॉर्टहैंड प्रॉपर्टी के अनुरूप है।

सिंटैक्स

पैडिंग प्राप्त करना

object.style.padding

पैडिंग सेट करना

object.style.padding = "value"

मान (शॉर्टहैंड सिंटैक्स)

/* एक मान: सभी चार तरफ */
padding: 10px;

/* दो मान: ऊपर/नीचे, बाएं/दाएं */
padding: 10px 20px;

/* तीन मान: ऊपर, बाएं/दाएं, नीचे */
padding: 10px 20px 30px;

/* चार मान: ऊपर, दाएं, नीचे, बाएं (घड़ी की दिशा में) */
padding: 10px 20px 30px 40px;

उदाहरण

यह उदाहरण एक पैराग्राफ पर पैडिंग सेट करता है:

<!DOCTYPE html>
<html>
<head>
<style>
  body { color: #000; background: lightblue; height: 100vh; }
  p { border: 2px solid #fff; }
  .btn {
    background: #db133a;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 40%;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
    margin: 1rem auto;
  }
</style>
</head>
<body>
<h1>DOM Style padding प्रॉपर्टी उदाहरण</h1>
<p>नमस्ते! मैं कुछ रैंडम टेक्स्ट वाला एक बहुत बढ़िया पैराग्राफ हूँ। नमस्ते! मैं कुछ रैंडम टेक्स्ट वाला एक बहुत बढ़िया पैराग्राफ हूँ। नमस्ते! मैं कुछ रैंडम टेक्स्ट वाला एक बहुत बढ़िया पैराग्राफ हूँ। नमस्ते! मैं कुछ रैंडम टेक्स्ट वाला एक बहुत बढ़िया पैराग्राफ हूँ।</p>
<button onclick="addPadding()" class="btn">पैडिंग जोड़ें</button>
<script>
  function addPadding() {
    document.querySelector('p').style.padding = "10px 30px";
  }
</script>
</body>
</html>

आउटपुट

"पैडिंग जोड़ें" बटन पर क्लिक करने पर, पैराग्राफ को ऊपर/नीचे 10px और बाएं/दाएं 30px पैडिंग मिलती है।

व्यक्तिगत पैडिंग प्रॉपर्टीज़

नोट्स

• शॉर्टहैंड प्रॉपर्टी पढ़ते समय, ब्राउज़र आमतौर पर विस्तारित रूप लौटाता है (उदाहरण: "10px 30px 10px 30px")।
• यदि CSS में सेट नहीं किया गया है, तो खाली स्ट्रिंग "" लौटाता है (गणना मान के लिए getComputedStyle() का उपयोग करें)।
• box-sizing: border-box के साथ, पैडिंग तत्व की कुल चौड़ाई/ऊंचाई को नहीं बढ़ाती (कंटेंट क्षेत्र सिकुड़ जाता है)।
• नकारात्मक मान अमान्य हैं।

सामान्य उपयोग के मामले

• कंटेनर में कंटेंट के चारों ओर सांस लेने की जगह जोड़ना।
• बटन/लिंक हिट क्षेत्र बढ़ाना (एक्सेसिबिलिटी के लिए न्यूनतम 44x44px)।
• कार्ड, पैनल, मॉडल में विजुअल हायरार्की बनाना।
• रेस्पॉन्सिव डिज़ाइन: मीडिया क्वेरीज़ में पैडिंग समायोजित करना।