Using padding-left in CSS

Padding-left in CSS

You are certainly familiar with the concept of padding-left in web design. This property allows you to adjust the space between content and the left edge of the element in question. In the world of web design, spacing plays a very important role; it helps make your design look more beautiful and easier to read.

For example, assume you want to place some text inside a div element, and you want this text to have a small space from the left edge. In this case, you can use padding-left. By using this property, you can easily control the necessary spacing and it will appear that the text is naturally set in your design.

Note that padding in general includes four sides (top, right, bottom, and left), and you can separately adjust any of these sides. This means you can set padding-left to a specific value or as part of padding overall, which includes all sides, set it.

Now, let’s see how we can practically use padding-left in a real example. In the code below, we will give a div a certain amount of padding-left and we will observe its effect.

<div class="example">
    <h2>A title here</h2>
    <p>This is an example text that has been set with padding-left.</p>
</div>

.example {
    padding-left: 20px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
}

Code Explanation

In this code, we have a div named example that contains an h2 and a p. We have given this element a value of padding-left: 20px;.

In the line below, the background of the div is selected to be #f0f0f0 so that the effect of padding-left can be better observed.

Finally, a border of 1 pixel in gray is added to the div to make the margin clear.