CSS padding-left Property
Padding is the space between its content and its border. The padding-left property in CSS is used to set the width of the padding area on the left of an element.
Syntax:
padding-left: length|percentage|initial|inherit;Property values:
- length: This mode is used to specify the size of padding as a fixed value. The default value is 0. It must be non-negative.
- percentage: This mode is used to specify the left padding in percent of the width of the element. It must be non-negative.
- initial: This property is used to set padding-left to its default value. : This property is used to set padding-left to its default value.
Example 1: In this example, we are using padding-left: length; property.
<!DOCTYPE html>
<html>
<head>
<title>
padding-left Property
</title>
<style>
.geek {
padding-left: 90px;
color: white;
background: green;
}
</style>
</head>
<body>
<h1 style="color: green;
text-align:center">
GeeksforGeeks
</h1>
<h2 style="text-align:center">
padding-left Property
</h2>
<!-- padding-left property used here -->
<p class="geek">
This paragraph has a padding-left: 90px;
</p>
</body>
</html>
Output: 
Example 2: In this example, we are using padding-left: percentage; property.
<!DOCTYPE html>
<html>
<head>
<title>
padding-left Property
</title>
<style>
.geek {
padding-left: 25%;
color: white;
background: green;
}
</style>
</head>
<body>
<h1 style="color: green;
text-align:center">
GeeksforGeeks
</h1>
<h2 style="text-align:center">
padding-left Property
</h2>
<!-- padding-left property used here -->
<p class="geek">
This paragraph has a padding-left: 25%;
</p>
</body>
</html>
Output: 
Supported Browsers: The browser supported by padding-left property are listed below:
- Google Chrome 1.0 and above
- Edge 12.0 and above
- Internet Explorer 4.0 and above
- Firefox 1.0 and above
- Opera 3.5 and above
- Apple Safari 1.0 and above
CSS padding-left Property – FAQs
What does the padding-left property control in CSS?
The padding-left property in CSS controls the space between the content of an element and its left edge. It is useful for adding spacing inside the element on the left side to improve layout and readability.
How can I add a 15px padding on the left side of an element?
To add a 15px padding on the left side, use: padding-left: 15px; . This adds 15 pixels of space between the left edge of the content and the left border of the element.
Does padding-left impact text alignment within an element?
Yes, padding-left can impact text alignment by adding space to the left of the text, effectively moving the text further to the right within the element.
Can I use padding-left with shorthand padding property?
Yes, padding-left can be combined with other padding values using the shorthand padding property, like: padding: 10px 15px 20px 25px; , where 25px represents padding-left.
What units can be used with padding-left?
Padding-left can use various units, including px (pixels), em (relative to the font size), rem (relative to the root element’s font size), %, and more.
