CSS padding-inline गुण

वर्णन और उपयोग

एलिमेंट का padding-inline इसका अर्थ है कि उसके अनुसूचक दिशा में, किनारे से सामग्री तक की जगह. यह निम्नलिखित गुणवत्ताओं का अभियोग है:

• padding-inline-start
• पैडिंग-इनलाइन-एंड

padding-inline गुणवत्ता के मूल्य को विभिन्न तरीकों से सेट किया जा सकता है:

यदि padding-inline गुणवत्ता दो मूल्य रखती है:

padding-inline: 10px 50px;

• शुरुआती अंतर्निहारी 10px है
• समाप्ति अंतर्निहारी 50px है

}

यदि padding-inline गुण को एक मान है:

• padding-inline: 10px;

शुरूआती और अंतिम स्थान के आंतरिक घाटी दोनों 10px हैं padding-inline से संबंधित CSS गुण बहुत अधिक समान है, लेकिन CSS गुण CSS गुणpadding-topपैडिंग-बॉटमpadding-top、 से संबंधित CSS गुण padding-left padding-right padding-inline से संबंधित CSS गुण बहुत अधिक समान है, लेकिन padding-block

गुण इनलाइन दिशा और ब्लॉक दिशा पर निर्भर करता है。ध्यान दें: writing-mode से संबंधित CSS गुण direction इनलाइन दिशा को परिभाषित करता है।यह एलेमेंट के इनलाइन दिशा में शुरूआती और अंतिम स्थान और padding-inline गुण का परिणाम।अंग्रेजी पृष्ठों के लिए ब्लॉक दिशा नीचे की ओर है और इनलाइन दिशा बाईं से दायां की ओर है。

इस्तेमाल

उदाहरण 1

इनलाइन दिशा के दोनों ओर आंतरिक घाटी निर्धारित करें:

div {
  padding-inline: 50px;
}

स्वयं प्रयोग करें

उदाहरण 2

जब <div> एलेमेंट का writing-mode गुण मान वर्टिकल-rl पर सेट करने पर इनलाइन दिशा नीचे की ओर होती है।परिणामस्वरूप एलेमेंट का शुरूआती छोर बाईं ओर से ऊपर की ओर जाता है और अंतिम छोर दायां ओर से नीचे की ओर जाता है:

div {
  writing-mode: vertical-rl;
  padding-inline: 10px 100px;
}

स्वयं प्रयोग करें

उदाहरण 3

जब <div> एलेमेंट का direction गुण मान रtl पर सेट करने पर इनलाइन दिशा दायां से बाईं की ओर होती है।परिणामस्वरूप एलेमेंट का शुरूआती छोर बाईं ओर से दायां ओर जाता है और अंतिम छोर दायां ओर से बाईं ओर जाता है:

div {
  direction: rtl;
  padding-inline: 10px 100px;
}

स्वयं प्रयोग करें

CSS व्याकरण

padding-inline: auto|value|initial|inherit;

गुण मान

तकनीकी विवरण

ब्राउज़र समर्थन

टेबल में दिए गए नंबर इस गुण को पूरी तरह से समर्थन देने वाले ब्राउज़र का संस्करण को प्रदर्शित करते हैं。

संबंधित पृष्ठ

संदर्भःCSS direction गुण

संदर्भःCSS padding-inline-end गुण

संदर्भःCSS padding-inline-start गुण

संदर्भःCSS padding-bottom गुण

संदर्भःCSS padding-left गुण

संदर्भःCSS padding-right गुण

संदर्भःCSS padding-top गुण

संदर्भःCSS रिटिंग-मोड प्रभाव