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

विभावना और उपयोग

inset-block विशेषता सेटिंग एलिमेंट का पारिता एलिमेंट के साथ ब्लॉक दिशा में दूरी。

ध्यान देंःइस गुण को प्रभावी करने के लिए इसे निर्दिष्ट करना जरूरी है position गुण

inset-block गुण निम्नलिखित गुणों का शोर्टकट है:

• inset-block-start
• इनसेट-ब्लॉक-एंड

inset-block गुण के मान को अलग-अलग तरीकों से सेट किया जा सकता है:

यदि inset-block गुण को दो मान है:

inset-block: 10px 50px;

• प्रारंभिक दूरी 10px है
• समाप्त दूरी 50px है

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

inset-block: 10px;

• प्रारंभिक और समाप्त दूरी दोनों 10px है

CSS के inset-inline गुण के साथ ऊपर,नीचे,बाएँ और दायाँ गुण बहुत ही समान है, लेकिन inset-block और inset-inline गुण ब्लॉक दिशा और इनलाइन दिशा पर निर्भर करता है。

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

उदाहरण

उदाहरण 1

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

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

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

उदाहरण 2

जब <div> एलिमेंट का writing-mode गुण मान के रूप में vertical-rl निर्दिष्ट करने पर एलिमेंट का प्रारंभिक स्थान शीर्ष से दायाँ तरफ जाता है और एलिमेंट का समाप्त स्थान नीचे से बाएँ तरफ जाता है:

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

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

CSS ग्रामर

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

गुण मान

तकनीकी विवरण

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

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

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

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

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

संदर्भःCSS इनसेट-ब्लॉक-एंड परिवार

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

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