We help IT Professionals succeed at work.

Space appearing between DIVs with margin/padding set to zero

Brad Bansner
Brad Bansner asked
My screen:


My shadowed/bordered boxes setup like this:

<div class="barriersbox1"></div>
<div class="barriersbox2">
<div class="barriersbox3"></div>

Open in new window

Styled like this:

.barriersbox1{width:781px;height:16px;background:#fff url('art/gr_barriers-box-1.jpg') no-repeat center top;padding:0;margin:0;}
.barriersbox2{width:745px;background:#fff url('art/gr_barriers-box-2.jpg') repeat-y center top;padding:0 18px 0 18px;margin:0;}
.barriersbox3{width:781px;height:15px;background:#fff url('art/gr_barriers-box-3.jpg') no-repeat center top;padding:0;margin:0;}

Open in new window

I am getting space above and below barriersbox2 for some reason, where the background image doesn't extend. My margins are zero. I have some padding, but even when I put that to zero, I will get spaces.

What am I doing wrong?

Thank you!
Watch Question

Most Valuable Expert 2018
Distinguished Expert 2019
The gap is appearing because of the top and bottom margin on the P tags within .barriersbox2. Add overflow:hidden to that rule and you should be OK

.barriersbox2 { overflow:hidden; }
Add this to your style:

.barriersbox2 > p {
    margin: 0;
    padding: 5px 0;
Brad BansnerWeb Developer


Great, thanks!

Explore More ContentExplore courses, solutions, and other research materials related to this topic.