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

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

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

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

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

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

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

margin-inline: (1,2)

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

margin-top: | | auto;

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

मूल्यों

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

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