सीएसएस शॉर्टेंड गुणों का उपयोग करते समय कुछ मानों को अपरिवर्तित छोड़कर

Question

यह प्रश्न समय-समय पर मेरे दिमाग में पॉप अप करता है, लेकिन कामकाज इतना आसान है क्योंकि मैंने इसे आगे की जांच करने के लिए समय लेने पर कभी भी परेशान नहीं किया है। आज मैंने सोचा कि मैं देखता हूं कि इस मामले पर स्टैक ओवरफ्लो को क्या कहना है।

/* Selector setting up shared properties for some elements */ 
#header, #main, #footer { 
    margin: 0 5%; 
} 

अब मान रहा margin-top और #header की margin-bottom ओवरराइड करने के लिए करना चाहते हैं:

मान लीजिए मैं इस किया है। मेरे सिर के ऊपर से मैं आमतौर पर margin: 1em 0; (पिछले नियम के बारे में भूलना) करता हूं, लेकिन यह निश्चित रूप से margin-right और margin-left ओवरराइड भी करेगा। जो मैं चाहता हूं वह यह निर्दिष्ट करने का एक तरीका है कि एक शॉर्टेंड संपत्ति का एक निश्चित मूल्य बिल्कुल नहीं बदला जाना चाहिए, क्या यह संभव है? ये विकल्प हैं जिनके बारे में मैंने सोचा है:

#header { 
    margin: 1em 0; /* Will remove left/right margin */ 
    margin: 1em auto; /* Will revert to default left/right margin */ 
    margin: 1em inherit; /* Will inherit left/right margin from parent */ 
    margin: 1em no-change; /* This is what I'm after: shorthand property to set only 2 of 4 values */ 

    /* And this is how I end up solving it */ 
    margin-top: 1em; 
    margin-bottom: 1em; 
} 

Answer 1

दुर्भाग्य से यह वर्तमान में संभव नहीं है। आपको क्रमशः margin-top और margin-bottom असाइन करने के साथ रहना होगा।

एक शॉर्टेंड संपत्ति हमेशा के सभी के घटक (लांगहैंड) गुणों के मानों को बदलती है। अर्थात्, शॉर्टेंड संपत्ति में छोड़े गए किसी भी मूल्य initial पर उनके संबंधित गुणों के लिए डिफ़ॉल्ट होंगे, जब तक cascading या शॉर्टंड संपत्ति के आधार पर कुछ अन्य नियमों द्वारा हल नहीं किया जाता है। उदाहरण के लिए, निम्नलिखित margin-bottom पूरे अक्षरों में लिखावट कि आशुलिपि के बाद दिखाई देता की वजह से नीचे को छोड़कर सभी पक्षों पर ऑटो मार्जिन में परिणाम:

#header { 
    /* 
    * Note: this is short for margin: auto auto auto auto; 
    * none of the longhands are set to initial! Different shorthands 
    * have different rules, but a shorthand always changes the values 
    * of all its longhands. 
    */ 
    margin: auto; 
    margin-bottom: 1em; 
} 

अगर वहाँ क्षैतिज और ऊर्ध्वाधर मार्जिन मार्जिन के लिए अलग shorthands थे, तो आप करने में सक्षम होगा विशिष्ट लम्बे समय के मूल्यों को रखने के बारे में चिंता किए बिना ऐसा करें, लेकिन इस समय कोई शॉर्टैंड मौजूद नहीं है।

मैं अपने टिप्पणी में उल्लेख किया है, margin: 1em inherit सीएसएस चौड़ा कीवर्ड inherit (initial के साथ और अन्य लोगों के बाद में मानकों में प्रस्तुत) के रूप में अमान्य है केवल संपत्ति घोषणाओं में खुद से प्रकट हो सकता है, और इस आशुलिपि घोषणाओं भी शामिल है। यहां तक ​​कि यदि margin: 1em inherit ने काम किया है, तो तत्व क्षैतिज मार्जिन को मूल तत्व से प्राप्त करता है, न कि अपने स्वयं के कैस्केड से (क्योंकि यह विरासत का अर्थ नहीं है)। किसी दिए गए तत्व पर किसी संपत्ति के लिए कैस्केड या निर्दिष्ट मान पुनर्प्राप्त करना संभव नहीं है, और ऐसा करने में सक्षम होने से यह निश्चित रूप से त्रुटि-प्रवण होगा क्योंकि इस तथ्य के कारण सबसे विशिष्ट चयनकर्ता से बोटमॉम घोषणा, जिसमें हल मूल्य शामिल है कहीं भी हो सकता है।