सीएसएस पैडिंग का संक्षिप्त अवलोकन

सीएसएस पैडिंग सीएसएस बॉक्स मॉडल के गुणों में से एक है। यह शॉर्टेंड संपत्ति HTML तत्व के सभी चारों ओर पैडिंग सेट करती है। सीएसएस पैडिंग लगभग हर एचटीएमएल टैग पर लागू किया जा सकता है (कुछ टेबल टैग को छोड़कर)। इसके अतिरिक्त, तत्व के सभी चार पक्षों का एक अलग मूल्य हो सकता है।

सीएसएस पैडिंग संपत्ति

शॉर्टेंड सीएसएस पैडिंग प्रॉपर्टी का उपयोग करने के लिए, आप स्टार ट्रेक प्रशंसकों के लिए स्मारक "ट्रौबले" (या "टीआरबीबीएलई" का उपयोग कर सकते हैं)। यह शीर्ष , दाएं , नीचे और बाएं के लिए खड़ा है, और यह आपके द्वारा शॉर्टेंड संपत्ति में सेट की गई पैडिंग चौड़ाई के क्रम को संदर्भित करता है। उदाहरण के लिए:

पैडिंग: ऊपर दाएं नीचे बाएं; पैडिंग: 1 पीएक्स 2 पीएक्स 3 पीएक्स 6 पीएक्स;

यदि आपने ऊपर सूचीबद्ध मानों का उपयोग किया है, तो यह आपके द्वारा लागू किए जा रहे HTML तत्व के हर तरफ एक अलग पैडिंग मान लागू करेगा। यदि आप सभी चार पक्षों में एक ही पैडिंग लागू करना चाहते हैं, तो आप अपने सीएसएस को सरल बना सकते हैं और केवल एक मान लिख सकते हैं:

पैडिंग: 12 पीएक्स;

सीएसएस की उस पंक्ति के साथ, तत्व के सभी 4 किनारों पर पैडिंग के 12 पिक्सल लागू होंगे।

यदि आप चाहते हैं कि पैडिंग ऊपर और नीचे और बाएं और दाएं के लिए समान हो, तो आप दो मान लिख सकते हैं:

पैडिंग: 24 पीएक्स 48 पीएक्स;

पहला मान (24 पीएक्स) ऊपर और नीचे लागू होगा, जबकि दूसरा बाएं और दाएं पर लागू होगा।

यदि आप तीन मान लिखते हैं, जो क्षैतिज पैडिंग (बाएं और दाएं) को ऊपर और नीचे बदलते समय समान बना देगा:

पैडिंग: ऊपर दाएं और बाएं तल; पैडिंग: 0 पीएक्स 1 पीएक्स 3 पीएक्स;

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

सीएसएस पैडिंग मूल्य

सीएसएस पैडिंग कोई गैर-ऋणात्मक लंबाई मान ले सकता है। माप को निर्दिष्ट करना सुनिश्चित करें, जैसे कि पीएक्स या एम। आप अपने पैडिंग के लिए प्रतिशत भी निर्दिष्ट कर सकते हैं, जो तत्व के युक्त ब्लॉक की चौड़ाई का प्रतिशत होगा। इसमें शीर्ष और निचले पैडिंग के लिए शामिल है। उदाहरण के लिए:

# कंटेनर {चौड़ाई: 800 पीएक्स; ऊंचाई: 200 पीएक्स; } # कंटेनर पी {चौड़ाई: 400 पीएक्स; ऊंचाई: 75%; पैडिंग: 25% 0; }

# कंटेनर तत्व के अंदर अनुच्छेद की ऊंचाई # संयोजक की ऊंचाई का 75% और शीर्ष पैडिंग के लिए चौड़ाई का 25% और नीचे पैडिंग के लिए चौड़ाई का 25% होगा। यह कुल 300 + 200 + 200 = 700 पीएक्स है।

सीएसएस पैडिंग जोड़ने के प्रभाव

ब्लॉक-स्तर तत्वों पर , पैडिंग चार तरफ लागू होती है। चूंकि तत्व पहले से ही एक ब्लॉक या बॉक्स है, इसलिए पैडिंग बॉक्स के किनारों पर लागू होती है।

जब इनलाइन तत्वों में सीएसएस पैडिंग जोड़ा जाता है , तो ऊर्ध्वाधर पैडिंग लाइन ऊंचाई से अधिक होने पर इनलाइन तत्व के ऊपर और नीचे तत्वों का कुछ ओवरलैपिंग हो सकता है, लेकिन यह रेखा की ऊंचाई को नीचे नहीं दबाएगा। इनलाइन तत्वों पर लागू क्षैतिज सीएसएस पैडिंग तत्व की शुरुआत और तत्व के अंत में जोड़ा जाएगा। और पैडिंग लाइनों को लपेट सकता है। लेकिन यह बहु-पंक्ति तत्व की सभी पंक्तियों पर लागू नहीं होगा, इसलिए आप बहु-रेखा इनलाइन सामग्री के एक सेगमेंट को इंडेंट करने के लिए पैडिंग का उपयोग नहीं कर सकते हैं।

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