CSS
Cascading Style Sheet
This property sets the distance between an element's border and its contents. A single value creates equal padding on all sides.
Padding-top
<html>
<head>
<title>Skillpundit</title>
<style type="text/css"> .text1
{
padding-top: 50px;
}
</style> </head>
<body>
<h3 class="text1">www.skillpundit.com</h3>
</body> </html>
<head>
<title>Skillpundit</title>
<style type="text/css"> .text1
{
padding-top: 50px;
}
</style> </head>
<body>
<h3 class="text1">www.skillpundit.com</h3>
</body> </html>
Output
www.skillpundit.com
Padding-bottom
<html>
<head>
<title>Skillpundit</title>
<style type="text/css"> .text2
{
padding-bottom: 70px;
}
</style> </head>
<body>
<h3 class="text2">www.skillpundit.com</h3>
</body> </html>
<head>
<title>Skillpundit</title>
<style type="text/css"> .text2
{
padding-bottom: 70px;
}
</style> </head>
<body>
<h3 class="text2">www.skillpundit.com</h3>
</body> </html>
Output
www.skillpundit.com
Padding-left
<html>
<head>
<title>Skillpundit</title>
<style type="text/css"> .text3
{
padding-left: 70px;
}
</style> </head>
<body>
<h3 class="text3">www.skillpundit.com</h3>
</body> </html>
<head>
<title>Skillpundit</title>
<style type="text/css"> .text3
{
padding-left: 70px;
}
</style> </head>
<body>
<h3 class="text3">www.skillpundit.com</h3>
</body> </html>
Output
www.skillpundit.com
Padding-right
<html>
<head>
<title>Skillpundit</title>
<style type="text/css"> .text4
{
padding-right: 100px;
}
</style> </head>
<body>
<h3 class="text4">SkillPundit is the best place to gain knowledge which includes skills like programming, designing, problem solving, general information about our country, reasoning, mental ability etc. SkillPundit is world's best platform to show your talent.</h3>
</body> </html>
<head>
<title>Skillpundit</title>
<style type="text/css"> .text4
{
padding-right: 100px;
}
</style> </head>
<body>
<h3 class="text4">SkillPundit is the best place to gain knowledge which includes skills like programming, designing, problem solving, general information about our country, reasoning, mental ability etc. SkillPundit is world's best platform to show your talent.</h3>
</body> </html>
Output
SkillPundit is the best place to gain knowledge which includes skills like programming, designing, problem solving, general information about our country, reasoning, mental ability etc. SkillPundit is world's best platform to show your talent.
A complete example of all of the Padding properties in cascading style sheets is Shown here:
Example
<html>
<head>
<title>Skillpundit</title>
<style type="text/css"> .text4
{
padding: 35px 70px 50px 90px;
}
</style> </head>
<body>
<h3 class="text4">SkillPundit is the best place to gain knowledge which includes skills like programming,designing, problem solving , general information about our country, reasoning,mental ability etc.</h3>
</body> </html>
<head>
<title>Skillpundit</title>
<style type="text/css"> .text4
{
padding: 35px 70px 50px 90px;
}
</style> </head>
<body>
<h3 class="text4">SkillPundit is the best place to gain knowledge which includes skills like programming,designing, problem solving , general information about our country, reasoning,mental ability etc.</h3>
</body> </html>
Output
SkillPundit is the best place to gain knowledge which includes skills like programming,designing, problem solving , general information about our country, reasoning,mental ability etc.
