किसी भी 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
यह 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>
यह 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>
यह 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>
यह 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>