CSS Padding सीखें हिन्दी में-Learn Padding Property in Hindi
CSS Tutorial के इस आर्टिकल में css padding के बारें में विस्तार से बात करते हैं । अगर आप एक ब्लॉगर है या आपने अभी अभी blogging करना start किया है तो आपको css का थोड़ा बहुत ज्ञान जरूर होना चाहिए। इस पोस्ट में आपको सिर्फ पैडिंग प्रॉपर्टी के बारे में बताया गया है। अगर आपने अभी तक हमारे पूरे ट्यूटोरियल को नहीं पढ़ा है तो आप Learn CSS in Hindi पर से सारे आर्टिकल पढ़ सकते हो.
किसी define की गई border के अंदर element के content के चारों तरफ space देने के लिए css padding property का प्रयोग किया जाता है।
CSS में आप padding को पूरा control कर सकते हो। किसी element की हर साइड की पैडिंग के लिए आप अलग-अलग padding properties का प्रयोग कर सकते हो।
All CSS Padding Properties
1. padding
2. padding-bottom
3. padding-left
4. padding-right
5. padding-top
1. padding:- सभी padding properties को एक साथ declare करने के लिए इसका प्रयोग होता है।
2. padding-bottom :- किसी element की bottom padding को सेट करने के लिए इसका use किया जाता है।
3. padding-left :-
एक element की left padding को सेट करने के लिए इसका use किया जाता है।
4. padding-right :- किसी element की right padding को declare करने के लिए इसका प्रयोग होता है।
5. padding-top :- एक element की top padding को बताने के लिए इसका प्रयोग होता है।
CSS Border Property का प्रयोग कैसे करें
CSS Outline Property का Use कैसे करें
CSS Padding property values
किसी भी padding properties को आप उसके हिसाब से नीचे लिखी values दे सकते हो।
lenth :- इसमें padding को डिक्लेर करने के लिए आप css lenth values का प्रयोग कर सकते हो। जैसे-px, pt, cm आदि।
% :- इसमें किसी containg element की width में से % value दी जाती है।
inherit :- इसमें padding parent element में specified padding के अनुसार होती है।
Shorthand padding property
Padding-top , padding-right , padding-bottom और padding-left properties को एक साथ declare करने के लिए padding का प्रयोग किया जाता है।
उदाहरण:-
यदि padding property की 4 वैल्यू define की गई हो तो जैसे:-
padding : 10px 20px 30px 50px;
top padding-10px
right padding- 20px
bottom padding- 30px
left padding- 50px
अगर padding property की 3 values दी गई हो तो जैसे:-
padding: 10px 20px 30px;
तो result इस प्रकार होगा
top padding- 10px
right and left padding- 20px
bottom padding- 30px
यदि padding property की 2 ही value दी गई हो जैसे:-
padding: 10 px 20 px; तो ये इस प्रकार काम करेगी:-
top और bottom padding 10px होगी।
right और left padding 20 px होगी।
अगर padding property की सिर्फ एक ही value को specify किया गया हो तो सभी चारों padding (top padding, left padding , bottom and right padding) 20px होगी।
Diffirence between Padding and Element width property
CSS width property किसी element के content area की width को specify करने के लिए होती है। Border , पैडिंग, और margin के अंदर जो partion होता है उसको content area कहते है।
CSS Background हिन्दी में सीखें
CSS Color property को कैसे use किया जाता है
यदि किसी element की width को पहले ही specify किया गया हो तो padding को ऐड करने पर उस element की total width में भी padding width add हो जाएगी।
For Example:-
यदि किसी element की width 200 px दी गई हो और उसमें padding 10 px हो तो उस element की actual width ( 200 px +10 px left padding+10px right padding) 220px होगी।
अगर आप width को 200px ही रखना चाहते हो तो box-sizing property का प्रयोग कर सकते हैं। इससे padding चाहे कितनी भी क्यों ना हो width में कोई फर्क नहीं पड़ेगा।
जैसे:-
<head>
<style>
div.ex1{
width: 200px; background-color: yellow; padding: 20px;text-align: center;
}
div.ex2{
width: 200px; background-color: orange; padding: 20px; box-sizing: border-box; align:center;
}
</style></head>
<body>
<p style=”color:red”><bold>Example Padding and Width Property </bold></p>
<div class=”ex1″><p> Here total width is 240px</p></div>
<div class=”ex2″> <p>Here total width is 200px</p></div>
</body></html>
इस आर्टिकल में हमने CSS padding property के बारें में विस्तार से पढ़ा। आपको सही से समझाने के लिय यहाँ example भी दिए गए। अगर आपको कुछ समझ ना आया हो तो आप comment करके पूछ सकते हो।
About Author
Sant Lal
My Name is Sant Lal From Haryana India.I am a part time blogger and always share usefull information for visiter.I want to help people about blogging, SEO and making money. Aap mujhe support de aur jyada se jyada apne dosto ke sath share kre. Google Plus