मार्जिन-ब्लॉक-स्टार्ट - सीएसएस-ट्रिक्स

Anonim

margin-block-startसीएसएस में संपत्ति ब्लॉक दिशा में एक तत्व के बाहरी प्रारंभिक किनारे के साथ स्थान की मात्रा को परिभाषित करता है। यह सीएसएस लॉजिकल प्रॉपर्टीज लेवल 1 स्पेसिफिकेशन में शामिल है, जो वर्तमान में वर्किंग ड्राफ्ट में है।

.element ( margin-block-start: 25%; writing-mode: vertical-lr; )

ब्लॉक दिशा में शुरुआती बढ़त तत्व द्वारा निर्धारित की जाती है writing-mode, directionऔर text-orientation। इसलिए, जब margin-block-startएक क्षैतिज बाएं से दाएं संदर्भ में उपयोग किया जाता है, तो यह ठीक उसी तरह कार्य करता है जैसे margin-topकि तत्व का शुरुआती किनारा इसके ऊपर है।

लेकिन अगर हम बदलते हैं writing-mode, कहते हैं, ऊर्ध्वाधर, तत्व को घुमाया जाता है, शुरुआती छोर को बाईं ओर रखकर। परिणामस्वरूप, जैसा margin-block-startव्यवहार करता है margin-left। मूल रूप से, शुरुआती किनारा उस दिशा के सापेक्ष है जो इसे बहती है। "तार्किक" गुणों के बारे में बात करते समय हमारा यही अर्थ है।

वाक्य - विन्यास

margin-block-start: 

यह एक संपत्ति के सिंटैक्स को देखने के लिए थोड़े अजीब है, दस्तावेज़ीकरण में सही एक और सीएसएस संपत्ति के सिंटैक्स को देखें, लेकिन यह वास्तव में यही है। मूल रूप से यह कहने की कोशिश कर रहा है कि संपत्ति उसी मान को स्वीकार करती है margin-topजो इस सिंटैक्स का अनुसरण करता है:

margin-top: | | auto;
  • प्रारंभिक मूल्य: 0
  • इस पर लागू होता है: आंतरिक तालिका तत्वों, रूबी बेस कंटेनरों और रूबी एनोटेशन कंटेनरों को छोड़कर सभी तत्व
  • इन्हेरिट किया: नहीं
  • प्रतिशत: इसी भौतिक संपत्ति के लिए
  • संगणित मूल्य: उसी के समान margin-*गुण
  • एनीमेशन प्रकार: गणना मूल्य प्रकार से

मूल्यों

margin-block-start एकल लंबाई या कीवर्ड मान को स्वीकार करता है।

/* Length values */ margin-block-start: 20px; margin-block-start: 2rem; margin-block-start: 25%; /* Keyword values */ margin-block-start: auto; /* Global values */ margin-block-start: inherit; margin-block-start: initial; margin-block-start: unset;

डेमो

निम्नलिखित डेमो में बटन पर क्लिक करें यह देखने के लिए कि तत्व का शुरुआती किनारा किस तरह से बदलता है writing-mode

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

अर्थात एज फ़ायर्फ़ॉक्स क्रोम सफारी ओपेरा
नहीं न 79+ 41+ 69+ 12.1+ 56+
Android क्रोम Android फ़ायरफ़ॉक्स Android ब्राउज़र iOS सफारी ओपेरा मोबाइल
हाँ हाँ 81+ 12.2+ 59+ है
स्रोत: कैनुएज़

अग्रिम पठन

31 अगस्त 2018 को अनुच्छेद

सीएसएस तार्किक गुण

ज्योफ ग्राहम