Padding after Last Item

HTML & CSS
1

In the code below, I need space between each Category (H2), but adding top padding to the H2 creates other issues.

How can I add padding after the last item in a list? (I don’t think you can style the < ul >, right?

<div class="row">
    <div class="column">
        <h2>Sports</h2>
        <ul>
            <li>Something</li>
            <li>Something</li>
            <li>Something</li>
            <li>Something</li>
        </ul>

        <h2>Indoors</h2>
        <ul>
            <li>Something</li>
            <li>Something</li>
            <li>Something</li>
            <li>Something</li>
            <li>Something</li>
            <li>Something</li>
        </ul>
    </div>
</div>
2

Unorderd and ordered lists have 1em of margin-top and margin-bottom by default. You could negate the margin-top to remove the space above the first item if desired and increase the margin-bottom to something more than 1em, or just increase the margin-bottom. You could use padding if you would rather, though.

ul {margin:0 auto 2em}

You didn’t exactly explain what the complicating issues were, so maybe this won’t work for you.

1 Like
3

FYI CSS can style basically any element to do anything. CSS is flexible

1 Like
4

You can style the ul however you like (within reason).

If you want a bottom margin (or padding) then add something like:

.column ul {margin-bottom: 1em}

If you don’t want to mess with the ul (for whatever reason) then you could target the last list item using :last-child.

.column li:last-child {margin-bottom: 1em}
1 Like
5

I see I asked a dumb question!!

I thought UL was off-limits for some strange reason.

Adding bottom padding to the UL seems to work best for me.

Thanks to all three of you for trying to help! :thumbsup:

6

It’s not off-limits.

The “gotcha” is when you want to apply style to the LI elements but mistakenly target the UL
(been there, done that)

7

@PaulOB,

Just for future reference, how well is that supported across browsers and among older browsers?

8

Do you need IE8 support? If so, instead of last-child, just throw a class=“last” on the last LI item.

If you don’t need IE8 support, you have free reign.

9

Is IE8 like an evil browser of something?

10

Depends on who you ask.

11

No, just a crappy one—which many people still use, unfortunately.

12

So it is the modern day replacement for IE6 ?

13

Indeed!

14

How old is IE8?

So I guess it creates a lot of strange results like IE6, huh? Any in particular?

Finally, how long do you expect that we will be stuck having to support?

15

This site seems to explain everything: http://breakupwithie8.com/

You’re a shadow of your former self. Oh wait, you don’t do shadows. I hate you.

16

Support will be tricky. It’s honestly hard to say. Track your websites usage though.

It should be mentioned that IE8 is the last IE for XP and many people get hand-me-down computers so it’s hard to say how long this will go on for.

17

As others have said IE8 and under don’t support :last-child (although IE8 does understand :first-child) and the usage of IE8 and below is under about 4% now so is a very minor browser. It therefore seems logical not to go out of your way to apply fixes just for that browser as long as it is displaying more or less ok.

As an example if you are using :last-child just to add a little bit more padding to make things look nice then that is no great loss to IE8 and doesn’t harm the function without the padding.

1 Like
18

I’m a Mac person and never got the memo… :blush:

19

Yeah, I won’t lose sleep over 4%

Thanks for the stats!

20

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.