Home/ Questions/Q 496739
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T05:42:53+00:00

I need two consecutive div elements (with backgrounds) to be touching seamlessly, one below

  • 0

I need two consecutive div elements (with backgrounds) to be touching seamlessly, one below the other. However, this layout breaks when I put a child p element into the bottom div. The margins of the p element force a blank gap between both div elements. This is strange behavior, as I am expecting the margin of the p to stay within the content and background area of the div. It renders the same way on Firefox, Chrome and IE 8.

<div style="background: #ccccff">Top Div</div>
<div style="background: #ffcccc"><p>Bottom Div</p></div>

Here’s what it looks like.

Image showing the top div (in blue), then a white gap, then the bottom div (in pink). The white gap should not be present.

I could fix this by changing the margins to paddings for the p element, but then I would also have to do this with header elements, list elements, and any other element I want to use at the start of a div. That is not desirable.

Could someone enlighten me: what caveat of the box model am I missing? Is there an easy way to fix this, preferably by modifying the style of the div?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    That is the expected behavior*. There are a few ways to get around it. If you float the divs, they will contain the margins of child elements and prevent margin collapsing. Another approach is to add a border or padding to the divs.

    * The margins of the div and the p “combine to form a single margin”, even though they are nested, because they have adjoining margins with no padding or border between them.

    • 0