Remove margin between divs

This question already has an answer here:

How do I remove the space between inline-block elements? 32 answers

---

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 .

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.

Suggested Solution per your particular situation and code:

Simply switch over to using floats instead. Instead of setting display: inline-block; do this:

http://jsfiddle.net/uhBW2/9/

.mainprogress div{
    padding:0;
    margin:0;
    float: left;
}

Other solutions:

(Note that in the JDFiddle solution using margin-left that 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-child structural pseudo-class to select that first div. It is more dynamic, and doesn't require HTML to be modified.

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/

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

---

The space is created because you've set the divs to "display: inline-block".

Read here how to fix:

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

---

Try using floats instead of inline-block, wider support and it actually works:

http://jsfiddle.net/uhBW2/7/

.mainprogress {
    height:60px;
    border:2px solid black;
    overflow: hidden;
}
.mainprogress div{
    padding:0;
    margin:0;
    float: left;
}

链接地址: http://www.djcxy.com/p/89272.html

上一篇: “内联”之间的神秘空白

下一篇: 删除div之间的边距