CSS padding in Hindi

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

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

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

CSS padding Example by Technalay


Leave a comment