Thursday, April 29, 2021

CSS Padding Property in HTML (In Hindi)

 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>

OUTPUT-



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>

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>

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>

OUTPUT-


Padding Property

यह Padding की Shorthand Property होती हैं। जिसके द्वारा एक बार में ही सभी तरफ की Padding Declare की जाती हैं। जब इस Property द्वारा Padding Declare की जाती हैं तब Padding का क्रम इस प्रकार रहता हैं।

  1. Padding Top
  2. Padding Right
  3. Padding Bottom
  4. 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 MarginBorder और 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-



<<Prev  ||  Next >>


For Any Doubt Clear on Telegram Discussion Group


Join Us On Social Media
For Any Query @8604799387

No comments:

Post a Comment

Transmission Media in Hindi - Sunrise Computer

TRANSMISSION MEDIA Transmission Media सूचना को Sender से Receiver तक पहुँचाने का माध्यम Transmission Media कहलाता है। यह दो प्रकार का होता...