2

I'm switching divs from float:left to inline-block and don't know why some of the divs are displacing, like they have some invisible border or something.

Here are with float:left https://jsfiddle.net/f7op4dze/

div{
    background-color: red;
    width: calc(25% - 40px);
    height: 50px;
    float:left;
    margin:0 20px;
}

And here with inline-block https://jsfiddle.net/dfdxa5hc/

div{
    background-color: red;
    width: calc(25% - 40px);
    height: 50px;
    display:inline-block;
    margin:0 20px;
}
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Alvarado87
  • 115
  • 9
  • Did you link the correct example? It looks like you might have forgotten to update your fiddle in the second version. – Orun Sep 27 '15 at 18:00
  • 1
    I think it's related to this - http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements – Stickers Sep 27 '15 at 18:02
  • You are right! I have updated the second one. Thanks! – Alvarado87 Sep 27 '15 at 18:02
  • See the link posted by @Pangloss, but also here you have a [simple fix](https://jsfiddle.net/lmgonzalves/dfdxa5hc/1/). – lmgonzalves Sep 27 '15 at 18:05
  • Thanks both for the info! – Alvarado87 Sep 27 '15 at 18:08
  • Possible duplicate of [Why don't these 4 inline-block boxes fit neatly in their container?](http://stackoverflow.com/questions/32801095/why-dont-these-4-inline-block-boxes-fit-neatly-in-their-container) – Michael Benjamin Oct 06 '15 at 15:13

3 Answers3

2

There's a space automatically added with inline elements and this space is applied to inline-block as well.

If there's no whitespace (either a space or a return) between the elements in your markup, the inline-block elements will be rendered without a space.

The easiest way to do this and still retain optimal formatting is using comment tags in between the <div> elements like so: https://jsfiddle.net/orvn/wd0ynq98/2/

<section>
     <div></div><!--
  --><div></div><!--
  --><div></div><!--
  --><div></div>
</section>
Orun
  • 4,383
  • 3
  • 26
  • 44
  • 2
    That's one way to address the issue. But I wouldn't call it the *easiest* way. There are various other ways that are just as simple and easy, without sacrificing more in terms of formatting. – Michael Benjamin Sep 27 '15 at 18:29
  • The challenge with `font-size: 0;` is that it becomes a hurdle if you want to render text in any of these elements. But I see what you mean. I like using `` because if you format it with the same indentation, the markup is easy to follow and hardly looks altered because most text editors will grey out the comment. – Orun Sep 27 '15 at 18:56
  • I just saw your other answer in the other question linked to above. I didn't know you can set the `font-size` of child elements back to normal after setting the parent to 0. Very cool. Your way is the most prudent. – Orun Sep 27 '15 at 18:59
  • Like I said, there are several options available. Both your answer and mine address the issue effectively. I only had a minor issue with calling the comment tag method the *easiest*. Thanks for your feedback. – Michael Benjamin Sep 27 '15 at 19:06
1

As one possible option to fix the problem, set the font-size of the parent to 0.

section { font-size: 0; }

You can restore the font on the child elements:

div { font-size: 16px; }

Demo: https://jsfiddle.net/dfdxa5hc/3/

For an explanation and other possible solutions, see my answer here:

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
0

There is (finally) a CSS only solution to this problem

section {
  display: table;
  word-spacing: -2em;
  width: 100%;
}

div {
  display: inline-block;
  word-spacing: normal;
}
Community
  • 1
  • 1
Cahnory
  • 11
  • 1