CSS padding-left

The CSS padding-left property is used to create left padding for specified elements. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .myd{border: 2px solid coral; padding-left: 32px;}
   </style>
</head>
<body>
   
   <div class="myd">
      This is an example of padding-left property in CSS.
   </div>
   
</body>
</html>
Output
This is an example of padding-left property in CSS.

The above example defines the CSS class "myd" with a 2px solid coral border and 32px left padding on the element.

The HTML code applies the "myd" class to a div element, which applies the properties defined in the "myd" class to the div element.

The padding-left property adds space to the left side of an element's content, displacing it from the border. In this case, the div element's content will be indented 32 pixels from the element's left border.

Therefore, the outcome will be a div element with a coral border and 32 pixels of space between the content and the left border.

Note: Left padding is the width of the area after the border and before the content of the specified element.

CSS padding-left syntax

The syntax of the padding-left property in CSS is:

padding-left: x;

The value of x should be any of the following:

Note: To learn about padding in detail, refer to its separate tutorial.

Advantages of the padding-left property in CSS

Disadvantages of the padding-left property in CSS

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!