Question

My code in this “Fiddle” shows that I have adjacent elements which vertical margins are collapsing on one another. I understand that due to the nature of vertical margins in css, the largest of the two is chosen, In my case the p tag.

What I am having trouble with is trying to break the margins by using a 1px border or 1px padding. I’ve seen it work with other workarounds such as position:absolute or float method. I am not understanding why using 1px border or padding is not working properly to give me 15px of space.

Answer 1

There is a some techniques to prevent collapsing of the margins. You said about two of them: absolute position and float. In addition you can use display: inline-block for your p tags. In this guide I found the solution with borders and paddings only for nested elements. And, of course, you can use really big borders instead of margins 🙂