CSS Padding In Hindi:-

CSS Padding

दोस्तों अगले पाठ में आप ने CSS Margins के बारे में पढ़ा है आज के पाठ में हम CSS Padding के बारे में पढ़ेंगे | CSS Padding का उपयोग भी किसी element के चारों ओर space बनाने के लिए किया जाता है | लेकिन Margins और Padding के बीच एक बहुत बड़ा अंतर है जिसे समझने के लिए आप नीचे के Example को देखें |

 

Example 01. जब हम किसी <h2> Tag पर CSS Margins का उपयोग करते है तो क्या होता है | नीचे के Example को देखें |

 

<html>
<head>
<style>

h2 {
    border: 1px solid red;
    margin: 50px;
}

</style>
</head>
<body>
<h2>Example of CSS Margins</h2>
<p>CSS margin used to create space around elements, outside of defined borders.</p>
</body>
</html>

 

Output:-

 

Example 02 . जब हम किसी <h2> Tag पर CSS padding का उपयोग करते है तो क्या होता है | नीचे के Example को देखें |

 

<html>
<head>
<style>

h2 {

    border: 1px solid red;

    padding: 50px;

   

}

</style>
</head>
<body>
<h2>Example of CSS padding</h2>
<p>CSS padding used to create space around elements,  inside of defined borders.</p>
</body>
</html>

 

Output:-

 

दोस्तों आप Example 1 और 2 में <h2> Tag के borders को देखें | Example 1 में जब हम <h2> Tag ने borders के बाहर से 50px का Space लिया है पर Example 2 में <h2> Tag ने borders के अंदर से 50px का Space लिया है | Padding और Margin के बीच यही अंतर है | Margin borders के बाहर से Space लेता है और Padding borders के अंदर से Space लेता है |

 

Margin की तरह ही आप padding के भी चार प्रकार है padding-top , padding-right , padding-bottom , padding-left , जिनका उपयोग आप किस दिशा से कितना padding लेना है इसे नियंत्रित करने के लिए किया जाता है |

Example 3 :-

<html>

<head>

<style>

h2 {

        border: 1px solid red;

        padding-top :40px;

        padding-right:20px;

        padding-bottom:45px;

        padding-left:60px;

   

}

</style>

</head>

<body>

<h2>CSS padding For Top Right Bottom Left.</h2>

</body>

</html>

 

Output:-

 

दोस्तों CSS Margins और Padding की value को px, cm, या in percent (%) में लिखा जा सकता है | Example :- padding-top :40cm; padding-right:20%; मैंने Margins और Padding के जितने भी उदाहरण बताएं है उनमे px का उपयोग किया है क्योंकि इसका उपयोग ज्यादा होता है |

Next:- Height And Width In Hindi :-