सीएसएस: पैडिंग बनाम ऊंचाई

Question

सीएसएस के साथ स्टाइल करते समय, मैंने देखा है कि पैडिंग संपत्ति आसानी से ऊंचाई संपत्ति के समान प्रभाव प्राप्त कर सकती है ... हालांकि पैडिंग संपत्ति मेरे पाठ को अच्छी और केंद्र रखती है, जबकि ऊंचाई संपत्ति मुझे अन्य सीएसएस नियम जोड़ने/लाइन ऊंचाई समायोजित करने के लिए मजबूर करता है।

क्या यह "गलत" है या आमतौर पर उपयोग की गई सीएसएस मानकों के खिलाफ ऊंचाई संपत्ति को कुचलने और इसके बजाय तत्व की ऊंचाई के लिए पैडिंग का उपयोग करने के लिए है?

इससे क्या असर पड़ सकता है?

Answer 1

दोनों ऊंचाई गद्दी स्वाभाविक एक तत्व की ऊंचाई नियंत्रित करते हैं। मुझे असहमत होना होगा कि पैडिंग का उपयोग गलत है, बल्कि विशिष्ट उपयोग मामले पर निर्भर करता है।

जब आप एक निश्चित कंटेनर आकार की आवश्यकता होती है तो ऊंचाई का उपयोग करें।

• प्रो: जब आप कंटेनर खड़ी फैलाने के लिए नहीं करना चाहते हैं के लिए उपयोगी।
• CON: भंगुर हो जाता है के रूप में आप फ़ॉन्ट आकार, मार्जिन, पैडिंग, आदि
  • की तरह गुणों को बदलने के बढ़ते आकार सामग्री छिपाने या अतिप्रवाह हो सकता है।
  • एक font-size बदलने, उदाहरण के लिए, एक झरना परिवर्तन (आप भी मार्जिन/गद्दी को बदलने के लिए है, या भाई/बच्चे तत्वों का आकार गुण पैदा कर सकता है।

उपयोग गद्दी जब font-आकार, मार्जिन, paddings बदलने के लिए आसान है, और कंटेनर कि incre सकता है के लिए अतिरिक्त सामग्री जोड़ने: आप एक निश्चित कंटेनर ऊंचाई की जरूरत नहीं है, लेकिन खाली स्थान के जोड़ना चाहते हैं

• प्रो। कंटेनर के लंबवत आकार को राख दें।
• CON: सामग्री/बढ़ती आकार गुणों को जोड़ना कंटेनर को लंबवत रूप से फैलाने का कारण बनता है, जो कुछ परिदृश्यों में अवांछनीय है।
  • परिदृश्यों के लिए अच्छा नहीं है जहां लंबवत स्थान सीमित है या नियंत्रित करने की आवश्यकता है।

मिनट-ऊंचाई और एक संकर दृष्टिकोण के लिए अधिकतम ऊंचाई का प्रयोग करें।

• प्रो: एक निश्चित ऊंचाई बाध्य करता है, लेकिन गतिशील विकसित करने के लिए सामग्री की अनुमति देता है जब तक यह है कि न्यूनतम या अधिकतम तक पहुँचता है।
• CON: आपके पास अभी भी आकार या गुणों के साथ "कैस्केड" अद्यतन समस्या है और एक बार जब आप न्यूनतम या अधिकतम हिट करते हैं तो सामग्री जोड़ा जाता है।

Answer 2

हां, तत्व ऊंचाई को नियंत्रित करने के लिए पैडिंग का उपयोग करना गलत है।

height तत्व (मूल रूप से border-bottom से border-top के लिए दूरी) जबकि padding नियंत्रण सामग्री और सीमा के बीच की दूरी की वास्तविक ऊंचाई नियंत्रित करता है।