CSS padding-left

The padding-left property in CSS is used to add space to the left side of an element's content.

Let's take a look at how to use the padding-left property with fictional data:

Result:


    <div style="padding-left: 20px;">
      This is some text with padding on the left side.
    </div>

This is some text with padding on the left side.

In the example above, we have a <div> element with a padding-left of 20 pixels. This adds space to the left side of the text inside the <div>.

You can also use different units for the padding-left property, such as percentages or ems:

Result:


    <p style="padding-left: 10%;">
      This is some text with padding on the left side.
    </p>

This is some text with padding on the left side.

In the example above, we have a <p> element with a padding-left of 10%. This will add space to the left side of the text based on a percentage of the parent element's width.

Experiment with different values for the padding-left property to see how it affects the spacing of your elements.