If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
padding किसी element के अंदर चारो ओर से लिया गया space (खली जगह) होता है। padding property की help से आप किसी element के अंदर चारो ओर से space manage कर सकते हैं।
p{
padding : 15px;
}simple padding example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS padding Example</title>
</head>
<body>
<p style="border : 2px solid green; padding : 10px;">padding : 10px; inside the element</p>
</body>
</html>element पर border style इसलिए apply कर रहे हैं ताकि हमें पता चल सके , कि element कहाँ से और कितनी padding ले रहा है।
margin से हम किसी element के चारो और space control करते हैं जबकि padding से किसी element के अंदर space manage करते हैं।
For Example :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS margin padding Example</title>
</head>
<body>
<p style="border : 2px solid red; margin : 10px;">margin : 10px; around the element</p>
<p style="border : 2px solid green; padding : 10px;">padding : 10px; inside the element</p>
</body>
</html>Example से आप समझ सकते हैं , कि किस तरह से padding और margin work करती है।
margin की तरह ही padding control करने के लिए CSS 5 properties provide कराती है।
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS padding-top Example</title>
</head>
<body>
<p style="padding-top:15px;border: 5px solid greenyellow;">padding-top: 15px;</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS padding-right Example</title>
</head>
<body>
<p style="padding-right:15px;border: 5px solid greenyellow;">padding-right: 15px;</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS padding-bottom Example</title>
</head>
<body>
<p style="padding-bottom:15px;border: 5px solid greenyellow;">padding-bottom: 15px;</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS padding-left Example</title>
</head>
<body>
<p style="padding-left:15px;border: 5px solid greenyellow;">padding-left: 15px;</p>
</body>
</html>padding property की help से आप चारो तरफ (top , right , bottom , left) की padding एक साथ manage कर सकते हैं।
padding:20px 5px 2px 15px;
padding:40px 0 0 30px;
padding:2px 30px 0 20px;
padding:50px 50px 0 50px;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS padding Example</title>
</head>
<body>
<p style="padding:20px 5px 2px 15px; border: 5px solid greenyellow;">padding:20px 5px 2px 15px;</p>
<p style="padding:40px 0 0 30px; border: 5px solid red;">padding:40px 0 0 30px;</p>
<p style="padding:2px 30px 0 20px; border: 5px solid green;">padding:2px 30px 0 20px;</p>
<p style="padding:50px 50px 0 50px; border: 5px solid blue;">padding:50px 50px 0 50px;</p>
</body>
</html>I Hope, अब आप में padding के बारे में अच्छे से समझ गए होंगे।