Paragraph margins dissapear when a list is added

HTML & CSS
1

I have a weird problem with paragraph margins collapsing when i insert a list. Say I have the following code:


<p>
text
<ul>
<li>list</li>
</ul>
more text
</p>

Paragraphs and ul’s both have 20px bottom margins in this code (css styled). However in the above example, the margin under “more text” disappears. To get it back, I have to enclose “more text” in its own p tags, like this:


<p>
text
<ul>
<li></li>
</ul>
</p>
<p>
more text
</p>

Is this normal behavior?

2

It’s not good syntax to place a <li> inside a <p> (that’s one block level element inside another, generally not allowed).

This is better:

<p>text</p>

<ul>
<li>list</li>
</ul>

<p>more text</p>
3

Thanks, I will do that from now on. But is the behavior I described normal for a situation like that (list inside paragraph)? I am not used to my margins just evaporating into thin air!

4

It could be an issue of collapsing margins.

5

That is completely invalid markup! A p element cannot contain a ul.

Since the </p> end-tag is optional in HTML, the paragraph will be closed before the list starts. Then you’ll get a superfluous </p> after the list and some dangling text.

6

Thanks,
I had not known that lists were not allowed inside p tags. My issue is solved now.