Site logo

Archived topic

Add general padding to the bottom of all list items

3 replies · Started by Erman on October 24, 2021

Viewing posts 1–4 of 4

Hi,

I'm wondering if it's possible to change the setup so that all list items come with a default bottom padding.

Currently I'm using the following code:

<li style="padding-bottom: 24px;">

However, it's quite a tedious process writing it in the code for each list item on separate posts.

Would love your expertise on this.

Take care!

Hi Erman,

You can always style all the list items with CSS like this:

ul > li, ol > li {
padding-bottom: 24px;
}

But this will apply to ALL list items on the site. If you wish to target a specific list you can use its class or ID as selector.

Example: If you're writing your own HTML for this, you can wrap the list with a div element and add class on it.

sample html:

    <ul class="padded-list-item">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>

sample CSS:

.padded-list-item {
padding-bottom: 24px;
}

Hi Elvin,

I apologize for missing your reply here.

That worked great.

Thank you, as usual, for your and the community's help here!

All the best :)

No problem. Glad to be of any help. :D

This archived topic is closed to new replies.