css padding

 142 total views

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 कर सकते हैं.

विभिन्न प्रकार की 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>

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>

padding-bottom Property

इस Property द्वारा किसी Element के लिए Bottom से Padding को Set किया जाता हैं. मतलब नीचे से Element Content और Border के बीच कितना खाली स्थान रहेगा. आइए इसे एक उदाहरण द्वारा समझते हैं.

इसे Try कीजिए

<!DOCTYPE html>
<html>
<head>
<title>CSS Bottom Padding Examples</title><style type=”text/css”>
p {
padding-bottom: 100px; border: 2px solid red;
}

</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>


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>

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 बढ जाती हैं.

इसे एक उदाहरण से समझते हैं.

मान कि एक 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 करती हैं.

इसे Try कीजिए

<!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>

इस वाले में box-sizing Property का इस्तेमाल नही किया हैं.

इस वाले में box-sizing Property का इस्तेमाल किया हैं.

By admin

Leave a Reply

Your email address will not be published.