इस Tutorial में हम आपको CSS Padding Property in Hindi के बारे में पूरी जानकारी देंगे. अध्ययन की सुविधा के लिए हमने इस Tutorial को निम्न भागों में बांटा हैं.
Element Content के बाहर और Border के बीच उपलब्ध खाली स्थान (Space) को Padding कहा जाता हैं. Padding का CSS Box Model का महत्वपूर्ण हिस्सा होता हैं.
Padding के द्वारा आप Element के चारों तरफ खाली जगह का निर्माण करते हैं. जिससे Element Content और Border के बीच उपयुक्त दूरी रहने से Content अधिक पठनीय लगता हैं जो Website और Blog की Readability को Increase करता हैं.
आप Element की जरूरत के हिसाब से उसके चारों तरफ (top, bottom, right, left) की Padding को अलग-अलग Set कर सकते हैं.
padding Property की Value आप Length (cm, pt, px आदि), प्रतिशत % और inherit द्वारा Set कर सकते हैं.
विभिन्न प्रकार की Padding Property
CSS द्वारा Element की Padding Declare करने के लिए कई अलग-अलग Properties उपलब्ध कराई जाती हैं. जिनके बारे में नीचे बताया जा रहा हैं.
padding-top Property
इस Property द्वारा किसी Element के लिए Top से Padding को Set किया जाता हैं. मतलब ऊपर से Element Content और Border के बीच कितना खाली स्थान रहेगा. आइए इसे एक उदाहरण द्वारा समझते हैं.
इसे Try कीजिए
<!DOCTYPE html> <html> <head> <title>CSS Top Padding Examples</title><style type=”text/css”> p { padding-top: 100px; border: 2px solid red; }
</style> <body> <p>This is a Paragraph. This paragraph text has written in English. This paragraph top padding is 100px and has a red border with 2px.</p> </body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This is a Paragraph. This paragraph text has written in English. This paragraph top padding is 100px and has a red border with 2px.
padding-right Property
इस Property द्वारा किसी Element के लिए Right Padding को Set किया जाता हैं. मतलब Browser Window के दांई तरफ से Element Content और Border के बीच कितना खाली स्थान रहेगा. आइए इसे एक उदाहरण द्वारा समझते हैं.
इसे Try कीजिए
<!DOCTYPE html> <html> <head> <title>CSS Right Padding Examples</title><style type=”text/css”> p { padding-right: 100px; border: 2px solid red; }
</style> <body> <p>This is a Paragraph. This paragraph text has written in English. This paragraph right padding is 100px and has a red border with 2px.</p> </body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This is a Paragraph. This paragraph text has written in English. This paragraph right padding is 100px and has a red border with 2px.
padding-bottom Property
इस Property द्वारा किसी Element के लिए Bottom से Padding को Set किया जाता हैं. मतलब नीचे से Element Content और Border के बीच कितना खाली स्थान रहेगा. आइए इसे एक उदाहरण द्वारा समझते हैं.
</style> <body> <p>This is a Paragraph. This paragraph text has written in English. This paragraph bottom padding is 100px and has a red border with 2px.</p> </body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This is a Paragraph. This paragraph text has written in English. This paragraph bottom padding is 100px and has a red border with 2px.
padding-left Property
इस Property द्वारा किसी Element के लिए Left Padding को Set किया जाता हैं. मतलब Browser Window के बांई तरद से Element Content और Border के बीच कितना खाली स्थान रहेगा. आइए इसे एक उदाहरण द्वारा समझते हैं.
इसे Try कीजिए
<!DOCTYPE html> <html> <head> <title>CSS Top Padding Examples</title><style type=”text/css”> p { padding-left: 100px; border: 2px solid red; }
</style> <body> <p>This is a Paragraph. This paragraph text has written in English. This paragraph left padding is 100px and has a red border with 2px.</p> </body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This is a Paragraph. This paragraph text has written in English. This paragraph left padding is 100px and has a red border with 2px.
padding Property
यह Padding की Shorthand Property होती हैं. जिसके द्वारा एक बार में ही सभी तरफ की Padding Declare की जाती हैं. जब इस Property द्वारा Padding Declare की जाती हैं तब Padding का क्रम इस प्रकार रहता हैं.
padding-top
padding-right
padding-bottom
padding-left
आइए ये Padding किस प्रकार अपना काम करती हैं.
जब padding में चार Value Declare की जाती है. जैसे; padding: 5px 10px 15px 20px; तब
Top Padding 5px होगी.
Right Padding 10px होगी.
Bottom Padding 15px होगी.
Left Padding 20px होगी.
p { padding: 5px 10px 15px 20px; }
जब padding में तीन Value Declare की जाती है. जैसे; padding: 5px 10px 20px; तब
Top Padding 5px होगी.
Right और Left Padding 10px होगी.
Bottom Padding 20px होगी.
p { padding: 5px 10px 20px; }
जब padding में दो Value Declare की जाती है. जैसे; padding: 5px 10px; तब
Top और Bottom Padding 5px होगी.
Right और Left Padding 10px होगी.
p { padding: 5px 10px; }
जब padding में एक Value Declare की जाती है. जैसे; padding: 5px; तब
अब चारो Padding 5px की होगी.
p { padding: 5px; }
Padding and Element Width
Width Property द्वारा Element की Width Set की जाती हैं. यह Width केवल Content Area के लिए set होती हैं. जो एक Element की वास्तविक Width नहीं होती हैं.
CSS Box Model के अनुसार Content Area Margin, Border और Padding के बीच स्थित होता हैं. अगर आप किसी Element के लिए Margin, Border या फिर Padding Set करते हैं तो Element की Width बढ जाती हैं.
इसे एक उदाहरण से समझते हैं.
मान कि एक Div है जिसकी width 300px है. अब उसमें 25px Padding Set कर दी जाती हैं. तो इस स्थिति में इस Element की Width 350px हो जाएगी. इसे ऐसे Calculate करें.
300px + 50px Padding (25px left + 25px right) = 350px
यदि आप चाहते हैंकि आपके Element की Width Element की अन्य Properties Declare करने पर ना बढे तो इसके लिए CSS की box-sizing Property का इस्तेमाल किया जाता हैं.
box-sizing Property Element Width को Set की गई Width से ज्यादा नही होने देती हैं.
यदि आप Padding Set करते हैं तो box-sizing Property इसकी जगह Content Area कम करके Adjust करती हैं.
</style> <body> <p class=”p1″>This is a Paragraph. This paragraph text has written in English. This is a Paragraph. This paragraph text has written in English.</p> <p class=”p2″>This is a Paragraph. This paragraph text has written in English. This is a Paragraph. This paragraph text has written in English.</p> </body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
इस वाले में box-sizing Property का इस्तेमाल नही किया हैं.
This is a Paragraph. This paragraph text has written in English. This is a Paragraph. This paragraph text has written in English.
इस वाले में box-sizing Property का इस्तेमाल किया हैं.
This is a Paragraph. This paragraph text has written in English. This is a Paragraph. This paragraph text has written in English.
आपने क्या सीखा?
इस Tutorial में आपने CSS Padding Property in Hindi के बारे में जाना हैं. इसके अलावा आपने Padding Property को अलग-अलग प्रकार से Declare करना भी सीखा हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.
This website is helpfull
Kisi bhi web side ke panels me kitna margen & padding use krte he
रवि जी, जितनी आपको जरूरत है उस हिसाब से उपयोग कर लिजिए.