Interval between divs

Question

This is what my problem looks like:

As you can see, there are 3 images (divs), and I do not want to remove these black distances between each div.

Most importantly, when I put the following in my css:

* { padding: 0; margin: 0; } 

Then it looks fine:

The problem is that I cannot use padding: 0 and margin: 0 for all my html, because other attributes will be broken, then ...

I tried adding: padding:0 and margin:0 to each div (image), but it does 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

Probably the marker on ul causes this.

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

may have the desired effect. li can also affect layout; but we cannot tell from your provided code.

Your "catch all" reset deletes margin / padding by default; therefore, it looks normal.

Edit - your .sb-title h3 may also need to remove the bottom margin, since it looks like you are using a fixed height (60 pixels), but an extra height is added by default.

This is easily debugged by firebug or the Chrome web inspector with visual indications of where the interval comes from.

Answer 2

This is due to the default UL field. You need a style:

 UL { margin: 0 }