Space appearing between DIVs with margin/padding set to zero

Posted on 2012-08-16
Last Modified: 2012-08-16
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!
Question by:bbdesign
    LVL 42

    Accepted Solution

    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; }
    LVL 2

    Expert Comment

    Add this to your style:

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

    Author Comment

    Great, thanks!

    Featured Post

    Course: HTML5 Mobile App Development with PhoneGap

    PhoneGap can help you leverage your already existing HTML5, JavaScript, and CSS skills in order to create and deploy cross-platform mobile apps.This program comprehensively covers HTML5 mobile app development from top to bottom.

    Join & Write a Comment

    CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
    When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
    In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
    In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now