Welcome to the CSS tutorial, and today we will discuss CSS padding left property. The CSS padding as we know is nothing but creating a space between the element’s content and the border of that element. We have already seen other properties like padding-top, padding-right, padding-bottom, and padding color. In fact, to save your time, you can use CSS padding shorthand property that will declare every padding property in a single line of the declaration.
CSS Padding Left – Definition
The CSS padding left property will create a padding space on the left side of the element. Since the negative value is not allowed in the CSS padding, therefore same rule will apply to the CSS padding left property as well.
Syntax
The CSS padding left syntax is:
padding-left: value;
CSS padding left – Values
Here value can be:
- Fixed value – If you want to use fixed or length value, then you can choose from pt, px, em, and cm.
- Percentage value – If you want to show the value in percent, then you can use ‘%’.
- Inherit value – This value you can use, if you want your child element to be same like the parent elements.
Note: You can use the default value as well.
CSS Padding left – Check browser compatibility
The browsers that will support the padding-left are:
- Chrome
- Firefox (Gecko)
- Internet Explorer (IE)
- Opera
- Safari (WebKit)
Can Read: Learn how to use CSS padding top?
CSS Padding left – Example
Now we will see the example of the padding-left in the real world example. The only purpose is to clear all your doubts regarding the CSS Padding left. In this example, we have set the border value to 3, and padding-left value to 135px. We have added four values CSS padding left A, B, C, and D to the table we have used. Now let’s simply check the output of this code to understand the use of the padding-left.
<html>
<head>
<title> Learn CSS Padding</title>
<style type="text/css">
table.sharplesson_CSS td { padding-left:135px; }
</style>
</head>
<body>
<h2>CSS padding Left</h2>
<table border="3" class="sharplesson_CSS">
<tr><td>CSS padding-Left A</td><td>CSS padding-Left B</td></tr>
<tr><td>CSS padding-Left C</td><td>CSS padding-Left D</td></tr>
</table>
</body>
</html>
The output will be:
Now the result is showing the space between the content and the left side of the border. In the above picture, we have shaded two cells with the red color to show you the space created by using the padding-left property. We made it to look ugly, because it will clear the actual meaning of the padding-left.
You can use the same example for the other fixed value, percentage or inherit values. The only thing you need to do is just be creative and apply values instead of 135px. You can simply enter the values like, 135pt, 135cm or 35% etc.
Conclusion
We have just covered the CSS padding left property with an easy to understand example. We at sharplesson believe in creating foundation, and that is why we are showing you the use of CSS padding properties in every single tutorial. The idea is “ If you will go strong, then only you can educate or solve your or others query or error”.