CSS: Gap between two DIV elements

When I wrote stylesheet for my website (www.ferolen.com) couple weeks ago, I encountered some errors. One of the CSS problems is a gap that mysteriously appears between DIV elements. Most of the time we would like to has two div elements to stick together smoothly especially if we use it to contain background image. You have set the padding and margin to 0, but it does not help. However, if you apply border around the DIV, magically the gap disappear. These symptoms usually occur when you have element with margin inside the DIV. How could we get rid of the gap but without the border? The answer is by applying 1px padding to the DIV element or set the margin of the child element of the DIV to 0.

For Example, the following case could be solved by adding “padding:1px” to #div2 or set the margin of “p” in div2 to 0;

.css: gap between DIVs css gap source code