div 之间的间距

Question

这就是我的问题的样子：

正如你所看到的，有 3 个图像（div），我想要't 删除每个 div 之间的黑色间距。

最重要的是，当我在 css 中放置以下内容时：

* {
padding: 0;
margin: 0;
}

然后它看起来很好：

问题是我不能在整个 html 中使用 padding: 0 和 margin: 0 ，因为其他属性将会被破坏......

我尝试添加：<代码>填充：0和每个 div（图像）上的 margin:0 ，但它不起作用。

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 也可能会影响布局；但我们无法从您提供的代码中得知。

您的“catch all”重置会删除默认的边距/填充；这就是为什么它看起来不错。

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

这可以使用 firebug 或 Chrome 的 Web 检查器轻松调试，并提供间距来自何处的视觉指示。

Answer 2

这是因为 UL 默认裕度。
你需要风格：

UL { margin: 0 }