CSS इनसेट-ब्लॉक-स्टार्ट प्रभाव

चयनीय पाठ्यक्रम

inset-block-start कोर्स सिफारिश:

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

CSS के इनसेट-इनलाइन और inset-block गुण CSS के top、bottom、left और right गुण काफी अधिक अभिज्ञ है, लेकिन inset-block और इनसेट-इनलाइन गुण ब्लॉक दिशा और लाइन दिशा पर निर्भर करता है।

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

उदाहरण

उदाहरण 1

स्थिर <div> एलीमेंट को ब्लॉक दिशा पर पिता एलीमेंट से शुरूआती छोर की दूरी सेट करें:

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

अपने आप प्रयोग करें

उदाहरण 2

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

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

अपने आप प्रयोग करें

CSS व्याकरण

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

गुण मान

मान वर्णन
auto डिफ़ॉल्ट मान।एलीमेंट के डिफ़ॉल्ट inset दूरी का इस्तेमाल करें。
length

स्थिर इकाई (जैसे px, pt, cm आदि) से दूरी निर्दिष्ट करें।नकारात्मक मान अनुमति है।

देखें:सीएसएस यूनिट。
% प्रतिशत से दूरी निर्दिष्ट करने के लिए इस्तेमाल करें, जो पिता एलीमेंट के इस अक्ष पर की दूरी के अनुसार है।
initial इस गुण को उसके डिफ़ॉल्ट मान पर सेट करें।देखें: initial。
inherit अपने पिता एलीमेंट से इस गुण को विरासत करें।देखें: inherit。

तकनीकी विवरण

डिफ़ॉल्ट मान: auto
विरासतशीलता: नहीं
एनिमेशन निर्माण: समर्थन है।देखें:एनिमेशन संबंधी गुण。
संस्करण: CSS3
जेसक्रिप्ट व्याकरण: object.style.insetBlockStart="100px"

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

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

च्रोम एज फायरफॉक्स सफारी ओपेरा
87.0 87.0 63.0 14.1 73.0

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

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

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

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