Remove margin between divs

Question

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

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

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

Fiddle here

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?

Yes, feel free to close/vote close (or should I delete myself? I feel there are some worthwhile answers here which would be a shame if they got lost) — Martijn, Aug 19 '13 at 16:19
Honestly, this question is asked at least once a day. There are no answers here that aren't already attached to other duplicates of this problem. — cimmanon, Aug 19 '13 at 16:40

Michael · Answer 1 · 2013-08-19T14:57:54.903

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.

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

`4. Fix the space by deleting the line breaks between your div's (NOT RECOMMENDED - HARD TO READ)` It may be hard for a developer to read, but that is beside the point. It 100% works and requires no CSS hacks. — rybo111, Dec 23 '13 at 15:07
Aligning all inline divs with a margin-right: 0px works PERFECTLY and as such (even with the original post that's claimed to have been a duplicate) this is STILL the BEST answer and it's Fall 2016. Thanks guy. — Mindsect Team, Oct 10 '16 at 05:35

score 3 · Answer 2 · answered Aug 19 '13 at 13:54

3

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/

answered Aug 19 '13 at 13:54

Rich

5,603
9
39
61

1

I can't access CSS Tricks because of security policy. Can you please post a solution here? – Pavlo Aug 19 '13 at 14:16

score 3 · Answer 3 · edited Jun 11 '22 at 00:47

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

.detailprogress div {
  height: 100%;
}

.detailprogress .done {
  background-color: lightgreen;
}

.detailprogress .donelate {
  background-color: lightpink;
}

.detailprogress .late {
  background-color: red;
}

.detailprogress .todo {
  background-color: green
}

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

Also, note the overflow hidden on the .mainprogress element. This causes the container to become the same height as it's floating children (same as a css clear: both; fix) — Hless, Aug 19 '13 at 13:57

score 2 · Answer 4 · answered Aug 19 '13 at 13:55

You need to Add float:left to all the Elements that you need to push together like below:

.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;
}

This is very redundent. He only needs to add float: left to the selector that has display: inline-block; That rule should also be deleted if you use float: left. — Michael, Aug 19 '13 at 14:59

Remove margin between divs

4 Answers4

Background:

Suggested Solution per your particular situation and code:

Other solutions: