HTML के किसी भी element के अंदर चारो side जो space दिया जाता है उसे padding कहते है। इसके लिए padding property का use किया जाता है।
CSS padding और CSS margin में फर्क सिर्फ इतना है की CSS margin में जो space provide करते है वो बाहर side होता है और CSS padding में space अंदर के तरफ होता है।
जरूर पढ़े : CSS margin in Hindi 🚀
Syntax
element {
padding : 50px;
}Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS padding Example by Technalay</title>
</head>
<body>
<p style="border : 2px solid red ; padding : 50px;">CSS padding Example by Technalay</p>
</body>
</html>ऊपर में border define इस लिए किया गया है ताकि आप padding के effect को देख पाए।
Preview
CSS padding Example by Technalay
Types of Padding in Hindi
किसी भी element के अंदर चारो side अलग-अलग space देने के लिए कुछ CSS property का use किया जाता है जो इस प्रकार है:
- padding-top
- padding-right
- padding-bottom
- padding-left
इन property के साथ कुछ values का use किया जाता है जो इस प्रकार है :
- length – padding को measur करने के लिए कुछ unit जैसे की px, pt, cm etc. का use जाता है।
- percentage – अगर आप चाहे तो percentage (%) का use कर सकते है।
- inherit – parent element की value को inherit (set) करने के लिए इसका use किया जाता है।
आइये अब सारे property को एक एक करके समझने का प्रयास करते है।
CSS padding-top
जब किसी element में top side में space set करना होता है तो padding-top property का use kiya जाता है।
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS padding Example by Technalay</title>
</head>
<body>
<p style="border : 2px solid red ; padding-top : 50px;">CSS padding Example by Technalay</p>
</body>
</html>CSS padding Example by Technalay
CSS Padding-right
जब किसी element में right side में space set करना होता है तो padding-right property का use kiya जाता है।
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS padding Example by Technalay</title>
</head>
<body>
<p style="border : 2px solid red ; padding-right : 50px;">CSS padding Example by Technalay</p>
</body>
</html>CSS padding Example by Technalay
CSS padding-bottom
जब किसी element में bottom side में space set करना होता है तो padding-bottom property का use kiya जाता है।
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS padding Example by Technalay</title>
</head>
<body>
<p style="border : 2px solid red ; padding-bottom : 50px;">CSS padding Example by Technalay</p>
</body>
</html>CSS padding Example by Technalay
CSS padding-left
जब किसी element में left side में space set करना होता है तो padding-left property का use kiya जाता है।
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS padding Example by Technalay</title>
</head>
<body>
<p style="border : 2px solid red ; padding-left : 50px;">CSS padding Example by Technalay</p>
</body>
</html>CSS padding Example by Technalay
Padding – Shorthand Property
इसके मदद से padding के सारे property एक साथ use किया जा सकता है।
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS padding Example by Technalay</title>
</head>
<body>
<p style="border : 2px solid red ; padding:20px 5px 2px 15px;">CSS padding Example by Technalay</p>
</body>
</html>CSS padding Example by Technalay