CSS पैडिंग किसके गुणों में से एक है? सीएसएस बॉक्स मॉडल. यह आशुलिपि गुण HTML तत्व के चारों ओर पैडिंग सेट करता है। CSS पैडिंग को लगभग सभी पर लागू किया जा सकता है एचटीएमएल टैग (कुछ टेबल टैग को छोड़कर)। इसके अतिरिक्त, तत्व के सभी चार पक्षों का एक अलग मान हो सकता है।
सीएसएस पैडिंग संपत्ति
शॉर्टहैंड CSS पैडिंग प्रॉपर्टी का उपयोग करने के लिए, आप "TRouBLe" (या स्टार ट्रेक प्रशंसकों के लिए "TRiBbLe") का उपयोग कर सकते हैं। इसका मतलब है ऊपर, सही, तल, तथा बाएं, और यह आपके द्वारा शॉर्टहैंड प्रॉपर्टी में सेट की गई पैडिंग चौड़ाई के क्रम को संदर्भित करता है। उदाहरण के लिए:
गद्दी: ऊपर दाएँ नीचे बाएँ;
पैडिंग: 1px 2px 3px 6px;
यदि आपने ऊपर सूचीबद्ध मानों का उपयोग किया है, तो यह जिस भी HTML तत्व पर आप इसे लागू कर रहे हैं, उसके हर तरफ एक अलग पैडिंग मान लागू होगा। यदि आप चारों तरफ एक ही पैडिंग लगाना चाहते हैं, तो आप अपने को आसान बना सकते हैं सीएसएस और केवल एक मान लिखें:
पैडिंग: 12 पीएक्स;
CSS की उस पंक्ति के साथ, तत्व के सभी 4 पक्षों पर 12 पिक्सेल की पैडिंग लागू होगी।
यदि आप चाहते हैं कि ऊपर और नीचे और बाएँ और दाएँ के लिए पैडिंग समान हो, तो आप दो मान लिख सकते हैं:
पैडिंग: 24px 48px;
पहला मान (24px) ऊपर और नीचे पर लागू होगा, जबकि दूसरा बाएँ और दाएँ पर लागू होगा।
यदि आप तीन मान लिखते हैं, तो ऊपर और नीचे बदलते समय क्षैतिज पैडिंग (बाएं और दाएं) समान हो जाएगी:
पैडिंग: ऊपर दाएं और बाएं नीचे;
पैडिंग: 0px 1px 3px;
सीएसएस बॉक्स मॉडल के अनुसार, पैडिंग तत्व/सामग्री के सबसे करीब है। इसका मतलब है कि सामग्री की चौड़ाई या ऊंचाई और आपके द्वारा उपयोग किए जाने वाले किसी भी सीमा मान के बीच एक तत्व में पैडिंग जोड़ा जाता है। यदि पैडिंग को शून्य पर सेट किया जाता है, तो इसका किनारा सामग्री के समान ही होता है।
सीएसएस पैडिंग मान
CSS पैडिंग कोई भी गैर-ऋणात्मक लंबाई मान ले सकता है। माप निर्दिष्ट करना सुनिश्चित करें, जैसे कि px या em। आप अपने पैडिंग के लिए एक प्रतिशत भी निर्दिष्ट कर सकते हैं, जो कि तत्व के ब्लॉक की चौड़ाई का प्रतिशत होगा। इसमें टॉप और बॉटम पैडिंग शामिल है। उदाहरण के लिए:
#कंटेनर {चौड़ाई: 800px; ऊंचाई: 200px; }
#कंटेनर पी {चौड़ाई: 400px; ऊंचाई: 75%; पैडिंग: 25% 0; }
ऊंचाई पैराग्राफ के अंदर #कंटेनर तत्व का 75% होगा #कंटेनरकी ऊंचाई प्लस शीर्ष पैडिंग के लिए चौड़ाई का 25% और नीचे की पैडिंग के लिए चौड़ाई का 25%। इसका योग 300 + 200 + 200 = 700px है।
CSS पैडिंग जोड़ने के प्रभाव
पर ब्लॉक-स्तरीय तत्वपैडिंग चार तरफ से लगाई जाती है। चूंकि तत्व पहले से ही एक ब्लॉक या बॉक्स है, इसलिए पैडिंग बॉक्स के किनारों पर लागू होती है।
जब CSS पैडिंग को इसमें जोड़ा जाता है इनलाइन तत्व, यदि लंबवत पैडिंग लाइन की ऊंचाई से अधिक है, तो इनलाइन तत्व के ऊपर और नीचे के तत्वों का कुछ ओवरलैपिंग हो सकता है, लेकिन यह लाइन-ऊंचाई को नीचे नहीं धकेलेगा। इनलाइन तत्वों पर लागू क्षैतिज सीएसएस पैडिंग तत्व की शुरुआत और तत्व के अंत में जोड़ दी जाएगी। और पैडिंग लाइनों को लपेट सकता है। लेकिन यह एक बहु-पंक्ति तत्व की सभी पंक्तियों पर लागू नहीं होगा, इसलिए आप बहु-पंक्ति इनलाइन सामग्री के एक खंड को इंडेंट करने के लिए पैडिंग का उपयोग नहीं कर सकते।
साथ ही, CSS2.1 में, आप कंटेनर ब्लॉक नहीं बना सकते हैं जहां चौड़ाई चौड़ाई (या पैडिंग चौड़ाई) के प्रतिशत वाले तत्व पर निर्भर करती है। यदि आप करते हैं तो परिणाम अपरिभाषित है। ब्राउज़र अभी भी सामग्री प्रदर्शित करेंगे, लेकिन हो सकता है कि आपको अपेक्षित परिणाम न मिलें। यदि आप इसके बारे में सोचते हैं, तो यह समझ में आता है, जैसे कि आपके कंटेनर तत्व को इसकी चौड़ाई को परिभाषित करने के लिए अपने बच्चे के तत्वों की चौड़ाई जानने की जरूरत है - जैसे कि जब इसकी पूर्व-निर्धारित चौड़ाई नहीं होती है, और एक या अधिक की चौड़ाई कंटेनर तत्व के प्रतिशत के रूप में निर्धारित होती है, तो यह एक गोलाकार श्रृंखला सेट करता है जिसमें कोई उत्तर। यदि आप अपने दस्तावेज़ पर किसी भी चीज़ की चौड़ाई के लिए प्रतिशत का उपयोग करते हैं, तो आपको यह सुनिश्चित करना चाहिए कि मूल तत्व की चौड़ाई भी परिभाषित है।