CSS मार्गिन-ब्लॉक-स्टार्ट प्रभाव

परिभाषा और उपयोग

margin-block-start गुण ब्लॉक दिशा के शुरुआत पर बाहरी छेद को निर्दिष्ट करते हैं。

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

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

उदाहरण

उदाहरण 1

ब्लॉक दिशा शुरुआत पर बाहरी छेद को सेट करें:

div {
  margin-block-start: 35px;
}

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

उदाहरण 2

जब <div> एलीमेंट का writing-mode गुण को vertical-rl में सेट करने पर ब्लॉक दिशा दांए से बाईं तरफ होती है।परिणाम के तौर पर एलीमेंट की शुरुआत से ऊपर के बाईं तरफ की ओर जाती है।इसलिए writing-mode के परिवर्तन भी ब्लॉक के शुरुआत और समापन स्थान और margin-block-start गुण के परिणाम को प्रभावित करता है margin-block-start प्रभाव:

#parentDiv {
  writing-mode: vertical-rl;
}
#myDiv {
  margin-block-start: 50px;
}

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

CSS व्याकरण

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

गुण मान

मान वर्णन
auto डिफ़ॉल्ट मान
length दूरी को निर्दिष्ट करें।इकाई: px, pt, cm आदि।नकारात्मक मान अनुमति है।देखें:सीएसएस इकाई。
% पैरेंट एलीमेंट के प्रतिशत से संबंधित लकीर की दूरी को निर्दिष्ट करें।
initial इस गुण को उसके डिफ़ॉल्ट मान को सेट करें।देखें: initial。
inherit इस गुण को उसके माता एलीमेंट से विरासत करें।देखें: inherit。

तकनीकी विवरण

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

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

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

च्रोम एज फायरफॉक्स सफारी ओपेरा
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 राइटिंग-मोड एट्रिब्यूट