हेल्लो दोस्तों! आज हम इस आर्टिकल में CSS Padding Property के बारें में पढेंगे. इसे बहुत ही आसान भाषा में लिखा गया है. इसे आप पूरा पढ़िए, यह आपको आसानी से समझ में आ जायेगा. तो चलिए शुरू करते हैं:-
CSS Padding Property in Hindi
यह 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 करती हैं.
इसे 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>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
