पैडिंग कैसे बनाएं: सीएसएस में ऑटो काम?

Question

मैं एक विरासत परियोजना पर काम कर रहा हूं जिसमें सीएसएस रीसेट *{ margin:0; padding:0 } सबकुछ पर लागू होता है। अब, मेरे नए कोड की आवश्यकता नहीं है क्योंकि यह Normalize.css पर निर्भर करता है। यह कोई समस्या नहीं है लेकिन कुछ स्थानों पर मुझे दोनों शैलियों का उपयोग करने की आवश्यकता है।

मैं अपने सीएसएस को कैसे अनदेखा कर सकता हूं? मैं *{margin:auto} करने में सक्षम हूं जो ठीक काम करता है। पैडिंग के बारे में भी यही सच नहीं है। पैडिंग को रीसेट करने के लिए कोई समकक्ष तरीका है। आप इसे हल करने के बारे में कैसे जाते हैं?

Answer 1

autopadding संपत्ति के लिए मान्य मान नहीं है, केवल एक चीज आप कर सकते हैं * घोषणा से padding: 0; बाहर ले, और बस संबंधित संपत्ति ब्लॉक करने के लिए padding सौंपते हैं।

आप * {} से padding: 0; को दूर से ब्राउज़र अपने तत्व है जो आप कुछ पिक्सल द्वारा अप्रत्याशित पार ब्राउज़र स्थिति ऑफसेट दे देंगे करने के लिए डिफ़ॉल्ट शैलियों लागू होगी, तो यह padding: 0;* का उपयोग करने और आवंटित करने के लिए बेहतर है, तो अगर आप गद्दी ओवरराइड करना चाहते से , बस की तरह

.container p { 
    padding: 5px; 
} 

Answer 2

तुम बस गुंजाइश चाहिए विशिष्ट क्षेत्रों कि रीसेट करने की आवश्यकता करने के लिए अपने * चयनकर्ता एक और नियम का उपयोग करें। .legacy * { }, आदि

Answer 3

सरल समर्थित समाधान या तो

.element { 
    display: block; 
    margin: 0px auto; 
} 

उपयोग करने के लिए मार्जिन या तत्व इस मार्जिन लागू किया है कि चारों ओर एक दूसरे कंटेनर का उपयोग है। अगर यह अस्तित्व में था तो इसका कुछ हद तक padding: 0px auto का प्रभाव होगा।

सीएसएस

.element_wrapper { 
    display: block; 
    margin: 0px auto; 
} 
.element { 
    background: blue; 
} 

एचटीएमएल

<div class="element_wrapper"> 
    <div class="element"> 
    Hello world 
    </div> 
</div>