CSS margin-inline प्रतियोगिता

विन्यास और उपयोग

margin-inline विशेषता लाइन दिशा में शुरू और समाप्ति के बाहरी घनत्व को निर्दिष्ट करती है, यह निम्नलिखित विशेषताओं का लघुरूप है:

• margin-inline-start
• मार्ग-इन-इनलाइन-एंड

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

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

margin-inline: 10px 50px;

• शुरू के समय का बाहरी घनत्व 10px है
• समाप्ति के समय का बाहरी घनत्व 50px है

यदि margin-inline विशेषता को एक मूल्य है:

margin-inline: 10px;

• margin-inline: 10px;

शुरू और अंत की मार्जिन 10px है margin-inline और margin-block गुण सीएसएस के margin-topऔरमार्ग-बोटमऔरmargin-left और margin-right गुण बहुत अच्छे से समान हैं, लेकिन margin-inline और margin-block गुण ब्लॉक दिशा और रिंग-इन दिशा पर निर्भर करता है।

ध्यान दें:संबंधित सीएसएस गुण रिटिंग-मोड और डायरेक्शन रिंग-इन दिशा निर्धारित करती है।यह एलेमेंट के शुरू और अंत की स्थिति और margin-inline-end गुण के परिणाम को प्रभावित करता है।अंग्रेजी पृष्ठों के लिए, ब्लॉक दिशा नीचे होती है और रिंग-इन दिशा बाईं से दायं की ओर होती है。

उदाहरण

उदाहरण 1

पंक्ति दिशा पर दोनों ओर की मार्जिन सेट करें:

डिव {
  margin-inline: 35px;
}

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

उदाहरण 2

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

डिव {
  margin-inline: 10px 50px;
  रिटिंग-मोड: वर्टिकल-र्ल;
}

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

उदाहरण 3

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

डिव {
  margin-inline: 10px 50px;
  डायरेक्शन: र्टील;
}

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

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

margin-inline: ऑटो|लेंगथ|इनीशियल|इनहेरिट;

गुण मान

तकनीकी विवरण

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

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

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

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

संदर्भ:CSS margin-inline-end प्रतियोगिता

संदर्भ:CSS margin-inline-start प्रतियोगिता

संदर्भ:CSS margin-bottom विशेषता

संदर्भ:CSS margin-inline प्रतियोगिता

संदर्भ:CSS margin-left प्रतियोगिता

संदर्भ:CSS margin-right प्रतियोगिता

संदर्भ:CSS margin-top प्रतियोगिता

संदर्भ:CSS रिटिंग-मोड एट्रिब्यूट