- Introduction to padding properties in Hindi
- position properties in Hindi
- CSS padding properties in Hindi
Padding Property
जिस तरह css मे margin property important होता है ठीक उसी प्रकार से padding property भी important होती है | हमारे web page के लिए | और padding property का भी use positioning के लिए किया जाता है | पर padding property internally work करती है |
margin और padding मे different केवल इतना है | की margin web page के according work करती है और padding property element के according work करती है |
CSS मे padding property का use html के किसी भी tags पर किया जा सकता है | example h1 to h6 , table , submenu , paragraph , image आदि |
जब आप padding property का use करते है | तो हमे चार value पास करनी होती है और अगर आप चाहे तो दो value भी पास कर सकते है वह value pixel मे हो सकती है या फिर percentage मे हो सकती है |
padding property मे जो हम चार value पास करते है उसमे पहला value top के लिए work करती है और दूसरा value right के लिए work करती है और तीसरा value bottom के लिए work करती है और चौथा value left side के लिए work करती है |
Syntax of Padding Property
padding : top right bottom left;
ऊपर दिये गये code मे देख सकते है | padding property का syntax कैसे type करते है या फिर लिखते है अब निचे दिये गये code को देखे और समझे |
<html>
<head>
<style type="text/css">
#p1 { border: 2px solid red; text-align: center; padding: 10px 10px 10px 10px; }
#p2 { border: 2px solid red; text-align: center; padding: 10% 10% 10% 10%; }
</style>
</head>
<body>
<p id="p1">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p2">Easy Hindi Tutorials is a best blog of computer programming</p>
</body>
</html>
padding-top Property
Css मे padding-top property का भी use किया जाता है | जब आप padding top property का use करते है तो हमारे content को only top से padding मिलती है और इसका भी value pixel मे या percentage मे दे सकते है |
<html>
<head>
<style type="text/css">
#p1 { border: 2px solid red; text-align: center; padding-top: 10px; }
#p2 { border: 2px solid red; text-align: center; padding-top: 10%; }
</style>
</head>
<body>
<p id="p1">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p2">Easy Hindi Tutorials is a best blog of computer programming</p>
</body>
</html>
padding-right Property
CSS मे padding right property का भी use किया जाता है | जब padding right property का use करते है तो हमारे content को only right side से padding मिलती है और इसका भी value pixel मे या percentage मे दे सकते है |
<html>
<head>
<style type="text/css">
#p1 { border: 2px solid red; text-align: center; padding-right: 10px; }
#p2 { border: 2px solid red; text-align: center; padding-right: 10%; }
</style>
</head>
<body>
<p id="p1">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p2">Easy Hindi Tutorials is a best blog of computer programming</p>
</body>
</html>
padding-bottom Property
CSS मे padding bottom property का भी use किया जाता है | जब padding bottom property का use करते है तो हमारे content को only bottom side से padding मिलती है और इसका भी value pixel मे या percentage मे दे सकते है |
<html>
<head>
<style type="text/css">
#p1 { border: 2px solid red; text-align: center; padding-bottom: 10px; }
#p2 { border: 2px solid red; text-align: center; padding-bottom: 10%; }
</style>
</head>
<body>
<p id="p1">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p2">Easy Hindi Tutorials is a best blog of computer programming</p>
</body>
</html>
padding-left Property
CSS मे padding left property का भी use किया जाता है | जब padding left property का use करते है तो हमारे content को only left side से padding मिलती है और इसका भी value pixel मे या percentage मे दे सकते है |
<html>
<head>
<style type="text/css">
#p1 { border: 2px solid red; text-align: center; padding-left: 10px; }
#p2 { border: 2px solid red; text-align: center; padding-left: 10%; }
</style>
</head>
<body>
<p id="p1">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p2">Easy Hindi Tutorials is a best blog of computer programming</p>
</body>
</html>
| CSS Margin Properties | CSS Display Properties |
| Previous | Next |
|---|