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