CSS इनसेट-इनलाइन-एंड प्रभाव

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

inset-inline-end गुण को निर्धारित करें ताकि तत्व की रेखागत दिशा पर अंत के साथ पितृ तत्व से दूरी को निर्धारित किया जा सके。

उपदेश:इस गुण को प्रभावित करने के लिए, इस गुण को निर्धारित करना आवश्यक है position गुण

सीएसएस के इनसेट-इनलाइन और inset-block गुण सीएसएस के ऊपर、नीचे、बाईं और दायं गुण बहुत ही अच्छा है, लेकिन inset-block और इनसेट-इनलाइन गुण ब्लॉक दिशा और रेखागत दिशा पर निर्भर करता है。

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

उदाहरण

उदाहरण 1

स्थानीयकृत <div> तत्व को रेखागत दिशा पर अंत के साथ पितृ तत्व से दूरी निर्धारित करें:

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

अपने आप साबित करें

उदाहरण 2

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

div {
  inset-inline-end: 50px;
  writing-mode: vertical-rl;
}

अपने आप साबित करें

उदाहरण 3

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

div {
  inset-inline-end: 50px;
  direction: rtl;
}

अपने आप साबित करें

सीएसएस व्याकरण

inset-inline-end: auto|लेंग्थ|इनिशियल|इनहेरिट;

गुण मूल्य

तकनीकी विवरण

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

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

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

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

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

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

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