Welcome to the CSS tutorials, and today we will talk about the CSS padding top. The CSS padding has variations like top, bottom, left and right. The padding-top property will only affect the top portion of the space between the content and the wall. If you wish to apply all side changes, then instead of using the CSS padding top, you can declare different properties or use the CSS padding shorthand property to declare in one line.
CSS Padding Top – Definition
The CSS padding top will create a space between the element’s content and the top side of the border.
Syntax:
padding-top: value;
CSS Padding Top – Values
Here value can be:
- Fixed value – The fixed value that you can use for CSS padding-top is pt, px, em, or cm.
- Percentage – You can use any percent ‘%’ value for the padding-top.
- Inherit – You can use the padding-top of the parent element.
Note: No negative values are allowed in padding, and hence it is applied to the CSS padding-top as well.
CSS Padding Top – Example
Now let’s try to understand the visual effect of the CSS Padding Top. In this example, we will see how padding-top can be seen in the real world example. We have just set the CSS padding top value to ‘135px’, and created a table with the border ‘1’. We have entered CSS padding-top A, B, C and D value in the table. Let’s see what you will get in result when you will run the code.
<html>
<head>
<title> Learn CSS Padding</title>
<style type="text/css">
table.sharplesson_CSS td { padding-top:135px; }
</style>
</head>
<body>
<h2>CSS padding Top</h2>
<table border="1" class="sharplesson_CSS">
<tr><td>paddings Top A</td><td>paddings Top B</td></tr>
<tr><td>addings Top C</td><td>paddings Top D</td></tr>
</table>
</body>
</html>
The output will be:
We can easily see that they dark yellow portion is an area created by the CSS padding top. And we have deliberately created an ugly looking table to let our readers to know, where we have made the change in the table. We can see the distance of the border and the content is 135px.
Note: You can use other values same way we did, why don’t you give a try and check whether you will be able to create same result using the inherit or the percentage values?
CSS padding Top – Browser compatibility
You can get basic support for the CSS padding-top of the browsers: Chrome
- Internet Explorer
- Android
- Firefox (Gecko)
- Opera
- Safari
Conclusion
We have just covered the CSS padding top, its syntax and it’s easy to understand example. We can use CSS as per our wish, the only condition is “Learn it to beat others”, and we at sharplesson believe in the simple and easy to understand tutorials. Just try to get perfection, because without practicing it, you can forget, what you learned today?