Html div 之间的间距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8062997/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Spacing between divs
提问by Cyclone
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.
如您所见，有 3 个图像（div），我不想删除每个 div 之间的黑色间距。
The most important thing is that, when I place in my css the following:
最重要的是，当我在我的 css 中放置以下内容时：
* {
padding: 0;
margin: 0;
}
Then it looks fine:
然后看起来不错：
The problem is that I can't use padding: 0and margin: 0for my whole html, because other attributes will be broken then...
问题是我不能对我的整个 html使用padding: 0和margin: 0，因为其他属性会被破坏......
I've tried to add: padding:0and margin:0on each div (image), but it not work.
我试图添加：padding:0并margin:0在每个 div（图像）上添加，但它不起作用。
HTML Source:
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>
My CSS:
我的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.
所有帮助尝试将不胜感激。
回答by Ross
It's likely the margin on the ulis causing this.
很可能是保证金ul导致了这种情况。
.sb-con ul { padding:0; margin:0; }
may have the desired effect. The limight also be affecting the layout; but we can't tell from your provided code.
可能会有想要的效果。该li还可能影响布局; 但我们无法从您提供的代码中看出。
Your "catch all" reset removes the default margin/padding; hence why it looks ok.
您的“全部捕获”重置会删除默认边距/填充；因此为什么它看起来不错。
Edit - your .sb-title h3may 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.
编辑 - 您.sb-title h3可能还需要删除底部边距，因为看起来您使用的是固定高度（60 像素），但默认边距会增加额外的高度。
This is easily debugged with firebugor Chrome's web inspector with the visual indications of where the spacing is coming from.
这可以使用firebug或 Chrome 的 web 检查器轻松调试，并带有间距来自何处的视觉指示。
回答by mixel
That's because of UL default margin. You need style:
那是因为 UL 默认余量。你需要的风格：
UL { margin: 0 }
