CSS inset-inline-start गुण

定义和用法

inset-inline-start defining and using

गुण ब्लॉक दिशा और लाइन दिशा पर निर्भर करता है。गुण को निर्धारित करना चाहिए।यह एलेमेंट को लाइन दिशा पर शुरूआती स्थान और पैरेंट एलेमेंट के बीच की दूरी निर्धारित करता है। इस गुण को कार्यान्वित करने के लिए position

CSS के inset-block संबंधित CSS गुण गुण बहुत अच्छे से मिलते-जुलते हैं, लेकिन CSS के गुणbottomtopbottom、 संबंधित CSS गुण left right गुण बहुत अच्छे से मिलते-जुलते हैं, लेकिन संबंधित CSS गुण inset-block inset-inline

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

उदाहरण

उदाहरण 1

स्थानीय <div> एलेमेंट को लाइन दिशा में शुरूआती छोर और पैरेंट एलेमेंट के बीच की दूरी निर्धारित करें:

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

स्वयं आज्ञा करें

उदाहरण 2

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

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

स्वयं आज्ञा करें

उदाहरण 3

जब <div> एलेमेंट का direction गुण को rtl में निर्धारित करने पर लाइन दिशा दायां बाईं है।इस वर्णन में एक छोटा गलती है, यह होना चाहिए 'परिणाम एलेमेंट का शुरूआती छोर अभी भी दायां पर है (क्योंकि rtl के लिए शुरूआती छोर से आरंभ होता है, लेकिन मूल दिशा ltr के बाद से पूरा सामग्री उल्टा होता है)।

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

स्वयं आज्ञा करें

CSS व्याकरण

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

गुण मान

तकनीकी विवरण

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

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

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

ट्यूटोरियल:CSS स्थानांतरण

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

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

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