CSS in Hindi Padding




किसी भी Webpage के Design मे Padding और Margin का बहुत बड़ा महत्व होता है. Padding और Margin को किसी HTML Element <div>,<h1> और <p> आदि की Border के संदर्भ मे Define किया जाता है. Padding Border की अंदर की तरफ Space के रूप मे Define की जाती है और Margin Border के बाहर की तरफ Space के रूप मे Define किया जाता है.

CSS मे Padding का उपयोग Content के आस पास Space देने के लिये किया जाता है. Padding को Define करने के लिए CSS आपको चार Properties प्रदान करती है.

  • padding-top

  • padding-bottom

  • padding-left

  • padding-right

Padding Top Property

यह Property Top Side की Padding को Define करने के लिए उपयोग की जाती है.

<!DOCTYPE HTML>
<html>
   <head>
      <title>Padding Top Property Example</title>
      <style>
         p.padding {
            padding-top: 2cm;
         }

         p.padding2 {
            padding-top: 40%;
         }
      </style>
   </head>
   <body>
      <p class="padding">Wellcome to My Website. My Name is Ammu.
      I Live in Telangana.</p>
      <p class="padding2">Wellcome to My Website. My Name is Ammu.
      I Live in Telangana.</p>
   </body>  
</html> 

Output

Padding Bottom Property

यह Property Bottom Side की Padding को Define करने के लिए उपयोग की जाती है.

<!DOCTYPE HTML>
<html>
   <head>
      <title>Padding Bottom Property Example</title>
      <style>
         p.padding {
            padding-bottom: 2cm;
         }

         p.padding2 {
            padding-bottom: 40%;
         }
      </style>
   </head>
   <body>
      <p class="padding">Wellcome to My Website. My Name is Ammu.
      I Live in Telangana.</p>
      <p class="padding2">Wellcome to My Website. My Name is Ammu.
      I Live in Telangana.</p>
   </body>  
</html> 

Output

Padding Left Property

यह Property Left Side की Padding को Define करने के लिए उपयोग की जाती है.

<!DOCTYPE HTML>
<html>
   <head>
      <title>Padding Left Property Example</title>
      <style>
         p.padding {
            padding-left: 2cm;
         }

         p.padding2 {
            padding-left: 40%;
         }
      </style>
   </head>
   <body>
      <p>Wellcome to My Website. My Name is Ammu.
      I Live in Telangana.</p>
      <p class="padding">Wellcome to My Website.
      My Name is Ammu.</p>
      <p class="padding2">Wellcome to My Website.
      My Name is Ammu.</p>
   </body>  
</html> 

Output

Padding Right Property

यह Property Right Side की Padding को Define करने के लिए उपयोग की जाती है.

<!DOCTYPE HTML>
<html>
   <head>
      <title>Padding Right Property Example</title>
      <style>
         p.padding {
            padding-right: 2cm;
         }

         p.padding2 {
            padding-right: 40%;
         }
      </style>
   </head>
   <body>
      <p>Wellcome to My Website. My Name is Ammu.
      I Live in Telangana.</p>
      <p class="padding">Wellcome to My Website.
      My Name is Ammu.</p>
      <p class="padding2">Wellcome to My Website.
      My Name is Ammu.</p>
   </body>  
</html>

Output