CSS Padding Property का परिचय
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 कर सकते हैं।
Different Types of Padding Property
CSS द्वारा Element की Padding Declare करने के लिए कई अलग-अलग Properties उपलब्ध कराई जाती हैं।
Padding Top Property
इस Property द्वारा किसी Element के लिए Top से Padding को Set किया जाता हैं। मतलब ऊपर से Element Content और Border के बीच कितना खाली स्थान रहेगा।
<!DOCTYPE html>
<html>
<head>
<title>CSS Top Padding Examples</title><style type=”text/css”>
p {
padding-top: 100px; border: 2px solid red;
}
<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>
</style>
</html>
Padding Right Property
इस Property द्वारा किसी Element के लिए Right Padding को Set किया जाता हैं। मतलब Browser Window के दांई तरफ से Element Content और Border के बीच कितना खाली स्थान रहेगा।
<!DOCTYPE html>
<html>
<head>
<title>CSS Right Padding Examples</title><style type=”text/css”>
p {
padding-right: 100px; border: 2px solid red;
}
<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>
</style>
</html>
<html>
<head>
<title>CSS Right Padding Examples</title><style type=”text/css”>
p {
padding-right: 100px; border: 2px solid red;
}
<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>
</style>
</html>
OUTPUT-
Padding Bottom Property
इस Property द्वारा किसी Element के लिए Bottom से Padding को Set किया जाता हैं। मतलब नीचे से Element Content और Border के बीच कितना खाली स्थान रहेगा।
<!DOCTYPE html>
<html>
<head>
<title>CSS Bottom Padding Examples</title><style type=”text/css”>
p {
padding-bottom: 100px; border: 2px solid red;
}
<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>
</style>
</html>
<html>
<head>
<title>CSS Bottom Padding Examples</title><style type=”text/css”>
p {
padding-bottom: 100px; border: 2px solid red;
}
<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>
</style>
</html>
OUTPUT-
Padding Left Property
इस Property द्वारा किसी Element के लिए Left Padding को Set किया जाता हैं। मतलब Browser Window के बांई तरद से Element Content और Border के बीच कितना खाली स्थान रहेगा।
<!DOCTYPE html>
<html>
<head>
<title>CSS Top Padding Examples</title><style type=”text/css”>
p {
padding-left: 100px; border: 2px solid red;
}
<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>
</style>
</html>
<html>
<head>
<title>CSS Top Padding Examples</title><style type=”text/css”>
p {
padding-left: 100px; border: 2px solid red;
}
<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>
</style>
</html>
OUTPUT-
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 होगी।
- जब padding में तीन Value Declare की जाती है। जैसे; padding: 5px 10px 20px; तब
- Top Padding 5px होगी।
- Right और Left Padding 10px होगी।
- Bottom Padding 20px होगी।
- जब padding में दो Value Declare की जाती है। जैसे; padding: 5px 10px; तब
- Top और Bottom Padding 5px होगी।
- Right और Left Padding 10px होगी।
- जब padding में एक Value Declare की जाती है। जैसे; padding: 5px; तब
- अब चारो 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 बढ जाती हैं।
Suppose, एक 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 करती हैं।
<!DOCTYPE html>
<html>
<head>
<title>CSS Top Padding Examples</title><style type=”text/css”>
.p1 {
width: 300px; padding: 25px; border: 2px solid red;background-color: lime;
}
.p2 {
width: 300px; padding: 25px; border: 2px solid red;background-color: lime;box-sizing: border-box;
}
</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>
OUTPUT-
For Any Doubt Clear on Telegram Discussion Group
No comments:
Post a Comment