The padding property sets the space inside an element.
It specifies padding for all 4 sides of the element : top , right , bottom ,and left.
Example
An <input> element with extra padding.
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
</head>
<body>
<input type="text" placeholder="Your email"
style="padding: 15px;">
</body>
</html>
Output
Multiple Padding values
padding with 4 values
Code
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
.padd {
padding: 20px 40px 60px 80px;
border: 5px solid lightblue;
background-color: aliceblue;
}
</style>
</head>
<body>
<div class="padd">
Padding: top 20px, right 40px,
bottom 60px, and left 80px
</div>
</body>
</html>
Output
padding with 3 values
An element with 3 padding values for top, right, bottom, and left the same as right.
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
.padd {
padding: 20px 40px 60px;
border: 5px solid lightblue;
background-color: aliceblue;
}
</style>
</head>
<body>
<div class="padd">
Padding: top 20px, right 40px,
bottom 60px, and left 40px
</div>
</body>
</html>
Output
padding with 2 values
An element with 2 padding values for top and bottom, and right and left.
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
.padd {
padding: 20px 40px;
border: 5px solid lightblue;
background-color: aliceblue;
}
</style>
</head>
<body>
<div class="padd">
Padding: top 20px, right 40px,
bottom 20px, and left 40px
</div>
</body>
</html>
Output
padding with 1 value
An element with 1 padding value for all sides.
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
.padd {
padding: 40px;
border: 5px solid lightblue;
background-color: aliceblue;
}
</style>
</head>
<body>
<div class="padd">
Padding: top 40px, right 40px,
bottom 40px, and left 40px
</div>
</body>
</html>
Output
No comments:
Post a Comment