LI margin does not affect UL element

Question

If i'll put margin-top to the first list item(LI), then margin is outside of ul.

Same thing for last item and margin-bottom. But margin-left/margin right works as expected..

Why is that and is that fixable?

Cheers

That is not how you make a `
`, look here for a proper one: http://jsfiddle.net/Meapn/1/ — Andy, Aug 03 '12 at 09:14
Mine works also fine. Quiestion is about margin-top, not how to code ul. — Kristian, Aug 03 '12 at 09:15
It works fine yes, but you should still try to use proper mark up, especially if you are going to ask for help troubleshooting issues — Andy, Aug 03 '12 at 09:16

score 5 · Accepted Answer · edited May 23 '17 at 12:00

5

You have to put

overflow : auto;

in the parent ul.

edited May 23 '17 at 12:00

Community

answered Aug 03 '12 at 09:18

Jerska

That is excaly what i was looking for! Cheers mate! – Kristian Aug 03 '12 at 09:20
But as Scott said, padding could be what you're looking for too. – Jerska Aug 03 '12 at 09:23
Jup +1 for that, but he posted a solution, you posted an answer to my question. And with your solution i dont have to change my code :) – Kristian Aug 03 '12 at 09:25

score 2 · Answer 2 · answered Aug 03 '12 at 09:16

Your ul contains only one element witch actually has working margin. You should replace this code

<li>
    This is a test<br>
    This is a test<br>
    This is a test<br>
    This is a test<br>
</li>

With:

<li>This is a test</li>
<li>This is a test</li>
<li>This is a test</li>
<li>This is a test</li>

score 1 · Answer 3 · answered Aug 03 '12 at 09:17

1

There is nothing between a ul tag and an li tag. They essentially follow each other. What you want is padding in the ul, not margin in the li.

answered Aug 03 '12 at 09:17

Scott

3 Answers3