CODEWITHSUNDEEP
htmlcss
HippoDuck
HippoDuck

Reputation: 2204

Why is the paragraph margins overlapping and being ignored?

I have two pages, with the same layout and the same CSS stylesheets, on one page it, works fine, on the other, the margins for the paragraph seem to overlap and be ignored completely

I am unable to post all of the source code due to the amount, I would just like to know what could cause this to happen.

Margins not working on paragraph tag

Upvotes: 0

Views: 618

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324790

Margins collapse.

If you have two elements each with margin: 10px, then you get 10px of space between them, which is counterintuitive if you expected 10+10 = 20px of space.

In this case, the margins collapse, but also you seem to have an issue with heights as the <p> itself does not fully contain its text. But notice how the margin stops at the exact place on the next line, as where the top of the content box is? This is how you can see that the margin has collapsed.

This is by design. If you want to avoid collapsing, try using padding instead, and no margin. Padding does not collapse like margin does.

Upvotes: 4

Related Questions