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

margin-blockCSS में एक शॉर्टहैंड प्रॉपर्टी है जो एक तत्व margin-block-startऔर margin-block-endमूल्यों को सेट करता है , जो दोनों तार्किक गुण हैं। यह इनलाइन दिशा में तत्व है, जो तत्व के द्वारा निर्धारित किया जाता चारों ओर अंतरिक्ष बनाता है writing-mode, directionऔर text-orientation।

संपत्ति CSS लॉजिकल प्रॉपर्टीज़ और वैल्यूज़ लेवल 1 विनिर्देश का हिस्सा है जो वर्तमान में संपादक की ड्राफ्ट स्थिति में है। इसका मतलब है कि परिभाषा और इसके बारे में जानकारी अब और आधिकारिक सिफारिश के बीच बदल सकती है।

.element ( margin-block: 30px 60px; writing-mode: vertical-rl; /* Determines the block start direction */ )

यदि writing-modeसेट किया गया है horizontal-lr, तो margin-blockसंपत्ति सेटिंग margin-topऔर की तरह कार्य करेगी margin-bottom। इस संपत्ति का एक दिलचस्प पहलू यह है कि यह तार्किक गुणों में से एक है, जिसमें गैर-तार्किक संपत्ति के साथ एक-से-एक नक्शा नहीं है। कोई पुरानी संपत्ति नहीं है जो दोनों (और केवल) ब्लॉक दिशा मार्जिन को सेट करती है।

लेकिन तत्व writing-modeको कुछ इस तरह बदलें vertical-lrऔर "नीचे" किनारे को ऊर्ध्वाधर दिशा में घुमाया जाए, और जैसे गुणों को margin-leftऔर अधिक अभिनय करें margin-right।

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

margin-block: (1,2)

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

margin-top: | | auto;

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

मूल्यों

यदि आप marginआशुलिपि संपत्ति से परिचित हैं, तो margin-blockबहुत परिचित महसूस करेंगे। अंतर केवल इतना है कि यह चार के बजाय दो दिशाओं में काम करता है।

/* Length values */ margin-block: 20px 40px; margin-block: 2rem 4rem; margin-block: 25% 15%; margin-block: 20px; /* a single value sets both values */ /* Keyword values */ margin-block: auto; /* Global values */ margin-block: inherit; margin-block: initial; margin-block: unset;