Spacing between divs

Question

This is how my problem looks like:

As you can see, there are 3 images (divs), and I wan't to remove that black spacings between each divs.

The most important thing is that, when I place in my css the following:

* {
padding: 0;
margin: 0;
}

Then it looks fine:

The problem is that I can't use padding: 0 and margin: 0 for my whole html, because other attributes will be broken then...

I've tried to add: padding:0 and margin:0 on each div (image), but it not work.

HTML Source:

<div id="sidebar-left" class="sidebar" role="complementary">
       <div class="sb-ui sb-title"><h3>Account</h3></div>
       <div class="sb-con">
            <ul>
        <li><a href="index.php?subtopic=accountmanagement">My Account</a></li>
                <li><a href="index.php?subtopic=accountmanagement&action=logout">Logout</a></li>
            </ul>
       </div>
       <div class="sb-ui sb-end"></div>
</div>

My CSS:

#sidebar-left {
margin-right: 9px;
}

.sidebar {
width: 170px;
position: relative;
bottom: 7px;
}

.sidebar, #content {
float: left;
}

.sb-title {
height: 60px;
text-align: center;
}

.sb-ui {
background: url("../images/ui/sidebar_ui.png");
}

.sb-con {
background: url("../images/ui/sidebar_bgrepeat.jpg") repeat-y;
}

.sb-end {
height: 23px;
background-position: bottom center;
margin-bottom: 10px;
}

.sb-ui {
background: url("../images/ui/sidebar_ui.png");
}

All help attempts will be appreciated.

Answer 1

It's likely the margin on the ul is causing this.

.sb-con ul { padding:0; margin:0; }

may have the desired effect. The li might also be affecting the layout; but we can't tell from your provided code.

Your "catch all" reset removes the default margin/padding; hence why it looks ok.

Edit - your .sb-title h3 may also need the bottom margin removed as it looks like you are using a fixed height (60px) but the default margin would add extra height.

This is easily debugged with firebug or Chrome's web inspector with the visual indications of where the spacing is coming from.