CODEWITHSUNDEEP
htmlcsslistmargin
Kristian
Kristian

Reputation: 3461

LI margin does not affect UL element

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?

See :Fiddle Link

Cheers

Upvotes: 1

Views: 1079

Answers (3)

Jerska
Jerska

Reputation: 12002

You have to put 

overflow : auto;

in the parent ul.

See Margin-Top push outer div down

Upvotes: 5

Scott
Scott

Reputation: 21882

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.

Fiddle Here

Upvotes: 1

oleg
oleg

Reputation: 197

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>

Upvotes: 2

Related Questions