Link to home
Start Free TrialLog in
Avatar of Brad Bansner
Brad Bansner

asked on

Space appearing between DIVs with margin/padding set to zero

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!
ASKER CERTIFIED SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Add this to your style:

.barriersbox2 > p {
    margin: 0;
    padding: 5px 0;
}
Avatar of Brad Bansner
Brad Bansner

ASKER

Great, thanks!