CSS inset-inline विशेषता

परिभाषा और उपयोग

inset-inline विशेषता एलिमेंट को लाइन दिशा में अपने पैरेंट एलिमेंट से यहां तक की दूरी सेट करती है。

गुण ब्लॉक दिशा और लाइन दिशा पर निर्भर करता है。इस विशेषता को प्रभावी बनाने के लिए, निर्दिष्ट करना आवश्यक है position विशेषता。

inset-inline विशेषता निम्नलिखित विशेषताओं की लघुरूप है:

• inset-inline-start
• इनसेट-इनलाइन-इंड

inset-inline विशेषता के वैल्यू को विभिन्न तरीकों से सेट किया जा सकता है:

यदि inset-inline विशेषता की दो वैल्यू हैं:

inset-inline: 10px 50px;

• शुरुआती छोर की दूरी 10px है
• अंतिम छोर की दूरी 50px है

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

inset-inline: 10px;

• शुरूआती और अंतिम स्थान की दूरी दोनों 10px है

CSS के inset-inline और गुण बहुत अधिक समान है, लेकिन CSS के गुणbottomtopbottom、 संबंधित CSS गुण left right गुण बहुत अधिक समान है, लेकिन संबंधित CSS गुण inset-inline inset-block

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

उदाहरण

उदाहरण 1

स्थानीय बनाए गए <div> एलिमेंट को लाइन दिशा में अपने पितृ तत्व से इस दूरी पर सेट करें:

div {
  inset-inline: 10px 50px;
}

खुद से प्रयोग करें

उदाहरण 2

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

div {
  inset-inline: 15px 30px;
  writing-mode: vertical-rl;
}

खुद से प्रयोग करें

उदाहरण 3

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

div {
  inset-inline: 15px 30px;
  direction: rtl;
}

खुद से प्रयोग करें

CSS व्याकरण

inset-inline: auto|length|initial|inherit;

गुण मान

तकनीकी विवरण

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

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

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

शिक्षा:CSS स्थानांतरण

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

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

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