div之间的间距

Question

这是我的问题的样子:

如你所见,有3个图像(div),我不想删除每个div之间的黑色间距.

最重要的是,当我在我的CSS中放置以下内容时:

* {
padding: 0;
margin: 0;
}

它看起来很好:

问题是我不能使用padding: 0和margin: 0我的整个HTML,因为其他属性将被打破然后...

我试图添加:padding:0和margin:0每个div(图像),但它不起作用.

HTML来源:

<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>

我的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");
}

所有的帮助尝试将不胜感激.

Answer 1

这可能ul是因为这导致了这一点.

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

可能会产生预期的效果.该li还可能影响布局; 但我们无法从您提供的代码中判断出来.

你的"全部"重置会删除默认的边距/填充; 因此为什么它看起来不错.

编辑 - 您.sb-title h3可能还需要删除底部边距,因为它看起来像是使用固定高度(60px)但默认边距会增加额外高度.

这可以通过firebug或Chrome的网络检查器轻松调试,并可以直观地显示间距的来源.