बॉक्स मॉडल: CSS आंतरिक गाप

एलिमेंट का आंतरिक गाप (padding) बॉर्डर और सामग्री क्षेत्र के बीच है। इस क्षेत्र को नियंत्रित करने का सबसे सरल विशेषता पैडिंग (padding) विशेषता है।

CSS padding गुणवत्ता एलीमेंट के किनारे और एलीमेंट के सामग्री के बीच की खाली क्षेत्र को परिभाषित करती है।

सीएसएस पैडिंग एट्रिब्यूट

CSS padding गुणवत्ता एलीमेंट के आंतरिक किनारा को परिभाषित करती है।padding गुणवत्ता लंबाई एकाई या प्रतिशत मान स्वीकार करती है, लेकिन नकारात्मक मान की अनुमति नहीं देती है。

उदाहरण के लिए, यदि आप चाहते हैं कि सभी h1 एलीमेंट के प्रत्येक किनारे 10 पिक्सल का आंतरिक किनारा हो, तो इस तरह करें:

h1 {padding: 10px;}

आप अधिकतर ऊपर, दाएँ, नीचे और बाएँ क्रम में आंतरिक किनारा सेट कर सकते हैं, और प्रत्येक किनारे को अलग-अलग एकाई या प्रतिशत मान का उपयोग कर सकते हैं:

h1 {padding: 10px 0.25em 2ex 20%;}

एकत्रिक आंतरिक किनारा गुणवत्ताएँ

भी नीचे इन चार अलग-अलग गुणवत्ताओं का उपयोग करके ऊपर, दाएँ, नीचे और बाएँ आंतरिक किनारा सेट किया जा सकता है:

आपको लगता होगा, नीचे के नियम का प्रभाव ऊपर के संक्षिप्त नियम के समान है:

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

आंतरिक किनारा के प्रतिशत मान

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

नीचे इस नियम को देखें: यह पैराग्राफ के आंतरिक किनारा को माता एलीमेंट की चौड़ाई के 10% के रूप में सेट करता है:

p {padding: 10%;}

उदाहरण में: यदि एक पैराग्राफ का माता एलीमेंट div एलीमेंट है, तो उसका आंतरिक किनारा div की चौड़ाई के अनुसार गणितीय होगा。

<div style="width: 200px;">
<p>यह पैराग्राफ एक ऐसे DIV में है जिसकी चौड़ाई 200 पिक्सल है。</p>
</div>

ध्यान दें:ऊपर और नीचे आंतरिक किनारा बाएँ और दाएँ आंतरिक किनारे से एक समान हैं; अर्थात् ऊपर और नीचे आंतरिक किनारे का प्रतिशत मान उसके माता एलीमेंट की चौड़ाई के अनुसार सेट होता है, नहीं कि ऊंचाई के अनुसार。

CSS आंतरिक किनारा उदाहरण:

सभी आंतरिक किनारा गुणवत्ताएँ एक ही घोषणा में
इस उदाहरण में दिखाया गया है कि कैसे संक्षिप्त गुणवत्ता का उपयोग करके सभी आंतरिक किनारा गुणवत्ताओं को एक ही घोषणा में सेट किया जा सकता है, जिसमें एक से चार मान हो सकते हैं。
नीचे आंतरिक किनारा 1 सेट करें
इस उदाहरण में दिखाया गया है कि कैसे सेमीटर मान का उपयोग करके कोष्ठ के नीचे आंतरिक किनारा सेट किया जाता है。
नीचे आंतरिक किनारा 2 सेट करें
इस उदाहरण में दिखाया गया है कि कैसे प्रतिशत मान का उपयोग करके कोष्ठ के नीचे आंतरिक किनारा सेट किया जाता है。
बाएँ आंतरिक किनारा 1 सेट करें
इस उदाहरण में दिखाया गया है कि कैसे सेमीटर मान का उपयोग करके कोष्ठ के बाएँ आंतरिक किनारा सेट किया जाता है。
बाएँ आंतरिक किनारा 2 सेट करें
इस उदाहरण में दिखाया गया है कि कैसे प्रतिशत मान का उपयोग करके कोष्ठ के बाएँ आंतरिक किनारा सेट किया जाता है。
设置右内边距 1
本例演示如何使用厘米值来设置单元格的右内边距。
设置右内边距 2
इस उदाहरण में देखा जाता है कि कैसे प्रतिशत मान का उपयोग करके टाबल की दायां इनर पैडिंग सेट किया जाता है。
ऊपरी इनर पैडिंग 1 सेट करें
इस उदाहरण में देखा जाता है कि कैसे सेंटीमीटर मान का उपयोग करके टाबल की ऊपरी इनर पैडिंग सेट किया जाता है。
ऊपरी इनर पैडिंग 2 सेट करें
इस उदाहरण में देखा जाता है कि कैसे प्रतिशत मान का उपयोग करके टाबल की ऊपरी इनर पैडिंग सेट किया जाता है。

सीएसएस इनर पैडिंग विशेषता

विशेषता वर्णन
पैडिंग एकल विशेषता।इसका काम एक विशेषता में एलिमेंट की सभी इनर पैडिंग विशेषताओं को सेट करना है。
पैडिंग-बॉटम एलिमेंट की नीचे इनर पैडिंग सेट करें。
पैडिंग-लेफ्ट एलिमेंट की बाईं इनर पैडिंग सेट करें。
पैडिंग-राइट एलिमेंट की दायां इनर पैडिंग सेट करें。
पैडिंग-टॉप एलिमेंट की ऊपरी इनर पैडिंग सेट करें。