Space appearing between DIVs with margin/padding set to zero

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!
Brad BansnerWeb DeveloperAsked:
Who is Participating?
Chris StanyonConnect With a Mentor Commented:
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 DeveloperAuthor Commented:
Great, thanks!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.