CSS padding-left Property

Learn about the CSS padding-left Property, its usages, syntax and examples.
Submitted by Shahnail Khan, on March 06, 2022

Padding in CSS is one of the most important properties in customizing web pages. It provides spacing between the element's content and its circumscribed border. The padding is a shorthand property of padding-top, padding-left, padding-right, padding-bottom. In this article, we will learn about the padding-left property with examples.

Let's understand this property in detail.

What is padding-left Property?

The padding-left property is used to give padding (space) from the left side. The default value is 0.

Syntax:

padding-left: %| length| initial| inherit

Quick overview of the syntax used,

Value	Explanation
%	left padding in terms of percentage of the width of a class
length	left padding in terms of units of length (cm, m, px, pt., etc.)
initial	padding-left property to its default value
inherit	same padding-left property as used in container (parent) class

The examples given below illustrates the use of padding-left 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-left propertyt</title>
   </head>
   <style>
      .content {
      font-size: x-large;
      border: 2px solid blue;
      padding-left: 20%;
      }
   </style>
   
   <body>
      <h2>About IncludeHelp</h2>
      <p>IncludeHelp is founded by a computer programmer
         Our aim is to make you "an expert in Computer programming languages"
      </p>
      <div class="content">
         Become an expert in C, C++, JAVA, PHP,DSA
      </div>
   </body>
</html>

Output:

We have set the padding-left property to 20% only to the content class. Therefore, the text inside this class is shifted towards the right, creating some space to the left.

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>left-padding2</title>
   </head>
   <style>
      body {
      border: 5px solid yellowgreen;
      background-color: salmon;
      padding-left: 100pt;
      font-style: italic;
      font-size: xx-large;
      }
   </style>
   
   <body>
      <h2>CSS stands for 'Cascading Style Sheets'</h2>
      <ul>
         <li>Variables in CSS</li>
         <li>Borders in CSS</li>
         <li> Counters in CSS</li>
         <li>CSS Flexbox</li>
      </ul>
   </body>
</html>

Output:

As you can see in this code, the padding-left property targets all the elements inside the body. We have set padding-left to 100pt. All the elements inside the body shift towards the right by 100 pt., creating some space towards the left.

CSS Tutorial & Examples »

The list-style Property in CSS

The padding-right Property in CSS

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples