Open In App

CSS padding-left Property

Improve
Improve
Like Article
Like
Save
Share
Report

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.

html




<!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: paddingleft

Example 2: In this example, we are using padding-left: percentage; property.

html




<!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: paddingleft

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


Last Updated : 13 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads