CSS मार्गिन-ब्लॉक-एंड प्रतियोगिता
- पिछला पृष्ठ मार्गिन-ब्लॉक
- अगला पृष्ठ मार्गिन-ब्लॉक-स्टार्ट
परिभाषा और उपयोग
margin-block-end गुण ब्लॉक दिशा अंत पर बाह्य मार्ग को परिभाषित करते हैं。
CSS के मार्गिन-ब्लॉक और margin-inline गुण CSS के margin-top,margin-bottom,margin-left और margin-right गुण बहुत अधिक आदर्शी हैं लेकिन मार्गिन-ब्लॉक और margin-inline गुण ब्लॉक दिशा और लाइन दिशा पर निर्भर करता है。
ध्यान दें:संबंधित CSS गुण writing-mode ब्लॉक दिशा को परिभाषित करता है।यह ब्लॉक के शुरूआती और अंत की स्थिति और margin-block-end गुण का परिणाम।अंग्रेजी पृष्ठों के लिए ब्लॉक दिशा नीचे होती है और लाइन दिशा बाईं से दायां होती है。
उदाहरण
उदाहरण 1
ब्लॉक दिशा अंत पर बाह्य मार्ग सेट करें:
div {
margin-block-end: 35px;
}
उदाहरण 2
जब <div> एलीमेंट के writing-mode गुण मान vertical-rl के रूप में सेट किए जाने पर ब्लॉक दिशा दायां से बाईं ओर होती है।परिणामस्वरूप एलीमेंट के अंत की स्थिति तल से बाईं ओर जाती है।इसलिए writing-mode के परिवर्तन भी margin-block-end के प्रभाव पर पड़ते हैं:
#parentDiv {
writing-mode: vertical-rl;
}
#myDiv {
margin-block-end: 50px;
}
CSS व्याकरण
margin-block-end: auto|length|initial|inherit;
गुण मान
| मान | वर्णन |
|---|---|
| auto | डिफ़ॉल्ट मान।एलीमेंट के डिफ़ॉल्ट बाह्य मार्ग |
| length |
दूरी निर्दिष्ट करें।इकाई के रूप में px, pt, cm आदि का प्रयोग किया जा सकता है।नकारात्मक मान की अनुमति है। देखें:सीएसएस इकाई。 |
| % | पिता एलीमेंट के अधीन लाइन दिशा में आकार के प्रतिशत दूरी निर्दिष्ट करता है。 |
| initial | इस गुण को उसके डिफ़ॉल्ट मान पर सेट करें।देखें initial。 |
| inherit | इस गुण को उसके पिता एलीमेंट से विरासत करें।देखें inherit。 |
तकनीकी विवरण
| डिफ़ॉल्ट मान: | auto |
|---|---|
| विरासत करना: | नहीं |
| एनिमेशन निर्माण: | समर्थन किया गया है।देखें:एनिमेशन से संबंधित गुण。 |
| संस्करण: | CSS3 |
| जेसक्रिप्ट व्याकरण: | object.style.marginBlockEnd="20px" |
ब्राउज़र समर्थन
तालिका में दिए गए नंबर इस गुण को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण को प्रदर्शित करते हैं。
| क्रोम | एज | फायरफॉक्स | सफारी | ओपेरा |
|---|---|---|---|---|
| 87.0 | 87.0 | 41.0 | 12.1 | 73.0 |
संबंधित पृष्ठ
संदर्भःCSS मार्गिन-ब्लॉक प्रतियोगिता
संदर्भःCSS मार्गिन-ब्लॉक-स्टार्ट प्रतियोगिता
संदर्भःCSS मार्गिन-बोटम प्रतियोगिता
संदर्भःCSS margin-inline प्रयोग
संदर्भःCSS margin-left प्रयोग
संदर्भःCSS margin-right प्रयोग
संदर्भःCSS margin-top प्रयोग
संदर्भःCSS रिटिंग-मोड प्रभाव
- पिछला पृष्ठ मार्गिन-ब्लॉक
- अगला पृष्ठ मार्गिन-ब्लॉक-स्टार्ट
