We help IT Professionals succeed at work.

Space appearing between DIVs with margin/padding set to zero

Brad Bansner
Brad Bansner asked
on
My screen:

http://www.interactivehealthpartner.com/mfc_form-barriers-to-activity-results.asp

My shadowed/bordered boxes setup like this:

<div class="barriersbox1"></div>
<div class="barriersbox2">
	<p>...</p>
</div>
<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!
Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019
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 Developer

Author

Commented:
Great, thanks!

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