Home »
CSS
CSS padding-top Property
Learn about the CSS padding-top property, its usages, syntax and examples.
Submitted by Shahnail Khan, on March 15, 2022
By the time you come across this property, I am pretty sure you know about padding property. Don't you still know what padding is? No worries. You can check out tutorial on padding property on our website. In this article, we will talk about the padding-top, which is one of the longhand properties of the CSS padding property.
What is CSS padding-top Property?
The padding-top property defines an element's padding (space) from the top. The default value is 0. Almost all browsers support this property.
Syntax:
padding- top: %| length| initial| inherit
Quick overview of the syntax used,
| Value |
Explanation |
| 0 |
This is the default value. |
| % |
Top padding in terms of percentage of the width of an element. |
| length |
Top padding in units of length (m, cm, px, pt., etc.) |
| initial |
Sets padding-top property to its default value. |
| inherit |
The same value of the padding-top property as set in the container (parent) class. |
The example given below illustrates CSS padding-top Property
Example 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>padding-top</title>
</head>
<style>
.navbar {
background-color: teal;
font-size: larger;
display: flex;
justify-content: center;
padding-top: 40px;
}
a {
color: lightblue;
padding: 20px;
}
</style>
<body>
<div class="navbar">
<a href="#">Home</a>
<a href="#">Coding problems</a>
<a href="#">Tech Articles</a>
<a href="#">About</a>
<a href="#">Contact us</a>
</div>
</body>
</html>
Output | Before adding padding-top Property:
Output | After adding padding-top Property:
We have created a navbar and styled using CSS. The padding-top property is added. The value is set to 20px, which specifies the top padding of navbar elements.
Example 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>padding top</title>
</head>
<style>
body {
background-color: yellowgreen;
}
img {
padding-top: 20%;
}
</style>
<body>
<div class="container">
<h2> Code like a pro!!</h2>
<img
src=" https://static.vecteezy.com/system/resources/thumbnails/000/180/409/small/software_enginner_1-01.png">
</div>
</body>
</html>
Output:
We have inserted an image using HTML. We have defined CSS padding-top property in the image only. The value is set to 20%.
CSS Tutorial & Examples »