गद्दी - सीएसएस-ट्रिक्स

paddingसीएसएस में संपत्ति, बॉक्स मॉडल के अंतरतम भाग को परिभाषित करता है किसी भी परिभाषित मार्जिन और / या सीमाओं का एक तत्व की सामग्री के चारों ओर अंतरिक्ष बनाने, अंदर।

पैडिंग मान लंबाई या प्रतिशत का उपयोग करके सेट किए जाते हैं, और नकारात्मक मान स्वीकार नहीं कर सकते। सभी पैडिंग प्रॉपर्टी के लिए प्रारंभिक, या डिफ़ॉल्ट, मान है 0।

यहाँ एक सरल उदाहरण है:

.box ( padding: 0 1.5em 0 1.5em; )

ऊपर दिया गया उदाहरण paddingशॉर्टहैंड प्रॉपर्टी का उपयोग कर रहा है , जो यहां दिखाए गए चार मानों को स्वीकार करता है:

.box ( padding: || || || )

यदि चार से कम मान सेट किए गए हैं, तो जो मान परिभाषित किए गए हैं, उनके आधार पर अनुपलब्ध मान मान लिए गए हैं। उदाहरण के लिए, निम्नलिखित दो नियम सेट समान परिणाम प्राप्त करेंगे:

.box ( padding: 0 1.5em; ) .box ( padding: 0 1.5em 0 1.5em; )

इस प्रकार, यदि केवल एक मान परिभाषित किया गया है, तो यह सभी चार गद्दी गुणों को एक ही मूल्य पर सेट करता है:

.box ( padding: 20px; )

यदि तीन मान घोषित किए जाते हैं, तो यह है padding: (top) (left-and-right) (bottom);।

व्यक्तिगत पैडिंग गुणों में से किसी को लॉन्गहैंड का उपयोग करके घोषित किया जा सकता है, इस स्थिति में आप प्रति संपत्ति केवल एक मूल्य निर्धारित करेंगे। इसलिए पिछले उदाहरण को फिर से लिखा जा सकता है:

.box ( padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; )

पैडिंग और तत्व चौड़ाई गणना

यदि किसी तत्व की निर्दिष्ट चौड़ाई है, तो उस तत्व में जोड़ा गया कोई भी पैडिंग तत्व की कुल चौड़ाई में जोड़ देगा। यह अक्सर एक अवांछनीय परिणाम होता है, क्योंकि यह आवश्यक है कि किसी तत्व की चौड़ाई को हर बार पैडिंग समायोजित किए जाने के बाद पुनर्गणना की जाए। (ध्यान दें कि यह ऊंचाई के साथ भी होता है, लेकिन ज्यादातर मामलों में यह एक तत्व को एक निर्धारित ऊंचाई नहीं देना पसंद किया जाता है।)

उदाहरण के लिए:

.box ( padding: 20px; width: 400px; )

इस उदाहरण में, हालांकि .boxतत्व को 400px की स्पष्ट चौड़ाई दी गई है , लेकिन पृष्ठ पर तत्व की वास्तविक प्रदान की गई चौड़ाई 440px होगी। यह न केवल 400px चौड़ाई को ध्यान में रखता है, बल्कि बायां पैडिंग का 20px और दायां पैडिंग का 20px (पिछले उदाहरण में पैडिंग शॉर्टहैंड के साथ परिभाषित) है।

यह कुल तत्व चौड़ाई के 400px के बजाय सामग्री स्थान के 400px को बनाए रखने के लिए होता है। यहाँ एक पेन यह प्रदर्शित करता है:

इस पेन को देखें!

यह सभी-इन-ब्राउज़र ब्राउज़रों में, मानक मोड में होता है, लेकिन क्वार्क मोड में IE6 और IE7 में नहीं होगा (अर्थात IE6 या IE7 में प्रदर्शित पृष्ठों पर जहां कोई सिद्धांत घोषित नहीं हुआ है या जहां कुछ और हो रहा है quirks ट्रिगर करने के लिए मोड)।

इस समस्या को हल करने के लिए, इस प्रकार 400px की चौड़ाई रखने से कोई फर्क नहीं पड़ता कि आप पैडिंग की राशि का उपयोग कर सकते box-sizingहैं:

.box ( padding: 20px; width: 400px; box-sizing: border-box; )

यह तत्व को पैडिंग बढ़ाते हुए अपनी चौड़ाई बनाए रखने का कारण बनता है, इस प्रकार उपलब्ध सामग्री स्थान को कम करता है। यहाँ एक प्रदर्शन है:

इस पेन को देखें!

ब्राउज़र का समर्थन

क्रोम	सफारी	फ़ायर्फ़ॉक्स	ओपेरा	अर्थात	एंड्रॉयड	आईओएस
हां	हां	हां	हां	हां	हां	हां