Html 删除div之间的边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18315507/
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
Remove margin between divs
提问by Martijn
This question seems to have been answered a million times, and it seems to work a million times too. Not for me though. I would like to push together all the divs in
这个问题似乎已经被回答了一百万次，它似乎也有效了一百万次。不过不适合我。我想把所有的 div 放在一起
<body>
<div class="mainprogress">
<div class="detailprogress" style="height:100%;width:18%">
<div class="done" style="width:58%"></div>
<div class="late" style="width:41%"></div>
</div>
<div class="detailprogress" style="height:35%;width:81%">
<div class="done" style="width:73%"></div>
<div class="todo" style="width:26%"></div>
</div>
</div>
</body>
for this I'm using the following CSS
为此，我使用以下 CSS
.mainprogress {
height:60px;
border:2px solid black;
}
.mainprogress div{
padding:0;
margin:0;
display:inline-block;
}
.detailprogress div {
height:100%;
}
.detailprogress .done {
background-color:lightgreen;
}
.detailprogress .donelate {
background-color:lightpink;
}
.detailprogress .late {
background-color:red;
}
.detailprogress .todo {
background-color:green
}
(fiddle here: http://jsfiddle.net/uhBW2/5/) when fiddling enough with negative margins, it seems to start working at some point, but it feels terribly hackish. How do I get the elements to align to each other?
（在这里摆弄：http: //jsfiddle.net/uhBW2/5/）当摆弄足够的负边距时，它似乎在某个时候开始工作，但感觉非常hackish。如何让元素彼此对齐？
回答by Michael
Background:
背景：
Inline-block inserts a natural space between items. In fact, it's essentially the width of a space if you were to hit the spacebar in your content, or even typing (an html markup space). This space will be smaller or larger dependent on your font size.
内联块在项目之间插入一个自然空间。事实上，如果您要在内容中按空格键，甚至键入 （html 标记空间），它本质上就是一个空格的宽度。这个空间会更小或更大，具体取决于您的字体大小。
There are several fixes to this problem, and I personally as well as many others consider this problem to be a sort of "bug" that needs fixing. That said, all of the fixes for this are very "hackish" so to speak. The solution you choose is up to your personal preference.
这个问题有几个修复程序，我个人和许多其他人都认为这个问题是一种需要修复的“错误”。也就是说，可以这么说，所有针对此问题的修复都非常“hackish”。您选择的解决方案取决于您的个人喜好。
Suggested Solution per your particular situation and code:
根据您的特定情况和代码建议的解决方案：
Simply switch over to using floats instead. Instead of setting display: inline-block;do this:
只需切换到使用浮点数即可。而不是设置display: inline-block;这样做：
.mainprogress div{
padding:0;
margin:0;
float: left;
}
Other solutions:
其他解决方案：
(Note that in the JDFiddle solution using margin-leftthat the first div also moved left when it should not have done so. To counteract this problem you will need to implement a class on that first div and make that -4 value 0 for that div alone. Another solution, and my preferred solution, would be to use the :first-childstructural pseudo-classto select that first div. It is more dynamic, and doesn't require HTML to be modified.
（请注意，在使用margin-left第一个 div的 JDFiddle 解决方案中，当它不应该这样做时，它也向左移动。要解决这个问题，您需要在第一个 div 上实现一个类，并使该 div 的 -4 值单独为 0。另一种解决方案，也是我首选的解决方案，是使用:first-child结构伪类来选择第一个 div。它更具动态性，不需要修改 HTML。
- Fix the margin space by adding
margin-left: -4px;-- http://jsfiddle.net/uhBW2/10/ - Fix the space by shrinking the space using
font-size: 0px;- http://jsfiddle.net/uhBW2/11/ - Fix the space by deleting the line breaks between your div's (NOT RECOMMENDED - HARD TO READ) -- http://jsfiddle.net/uhBW2/12/
- Fix the space by using
word-space: -.25em;(See PavloMykhalov's comments below) -- http://jsfiddle.net/uhBW2/13/
- 通过添加
margin-left: -4px;- http://jsfiddle.net/uhBW2/10/修复边距空间 - 通过使用缩小空间来修复空间
font-size: 0px;- http://jsfiddle.net/uhBW2/11/ - 通过删除 div 之间的换行符来修复空格（不推荐 - 难以阅读）-- http://jsfiddle.net/uhBW2/12/
- 使用修复空间
word-space: -.25em;（见下面 PavloMykhalov 的评论）——http: //jsfiddle.net/uhBW2/13/
***Note to other developers: If there are other solutions to this please post below and I will add it above. I feel like I'm missing a 5th way of fixing this...
***其他开发人员注意：如果有其他解决方案，请在下面发布，我会在上面添加。我觉得我错过了解决这个问题的第五种方法......
回答by Rich
The space is created because you've set the divs to "display: inline-block".
创建空间是因为您已将 div 设置为“display: inline-block”。
Read here how to fix:
在此处阅读如何修复：
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
回答by Hless
Try using floats instead of inline-block, wider support and it actually works:
尝试使用浮动而不是内联块，更广泛的支持，它确实有效：
.mainprogress {
height:60px;
border:2px solid black;
overflow: hidden;
}
.mainprogress div{
padding:0;
margin:0;
float: left;
}
回答by Akshay Khandelwal
You need to Add float:leftto all the Elements that you need to push together like below:
您需要添加float:left到您需要一起推送的所有元素，如下所示：
.mainprogress {
height:60px;
border:2px solid black;
}
.mainprogress div{
padding:0;
margin:0;
display:inline-block;
float:left;
}
.detailprogress div {
height:100%;
float:left;
}
.detailprogress .done {
background-color:lightgreen;
float:left;
}
.detailprogress .donelate {
background-color:lightpink;
float:left;
}
.detailprogress .late {
background-color:red;
float:left;
}
.detailprogress .todo {
background-color:green
float:left;
}
