CSS - odd margin between inline-block elements

Question

I have a set of elements with display: inline-block on a container div that is supposed to expand horizontally if the contents exceed the device width. It all works well, but there's an odd margin between each .item element, as you can see here : http://julienlima.com/

notice the blue line between images

(notice the blue line between images)

<span class="fix item">
<img src="image.jpg" data-ratio="1.33" data-width="800" data-height="600" />
<div class="fix details">
    <div class="fix row"><a href="#" class="title">title</a></div>
    <div class="fix row"><div class="date">date</div></div>
    <div class="fix row"><a href="#" class="view">View Post</a></div>
</div>

#gallery {
    clear: both;
    width: auto;
    white-space: nowrap;
}

#gallery .item {
    display: inline-block;
    *display: inline;
    width: auto;
    min-width: 100px;
    white-space: nowrap;
    border-right: 1px #CCC dotted;
    border-bottom: none;
    padding: 0 25px;
}

#gallery .item:first-child {
    margin-left: 25px;
    border-left: 1px #CCC dotted;
}

There's no margin or padding messing it, and I have no idea why it behaves like this instead of floating. Any ideas?

Please include code to reproduce the problem in your question. That way when you fix your site, this question can still be helpful in the future to others with the same problem. — Jeroen, Sep 20 '13 at 22:52

score 3 · Accepted Answer · answered Sep 20 '13 at 23:02

3

This is due to white-space and/ or line breaks in your HTML markup. Remove them in the code and the margins will also disappear. It's always a matter with 'inline' Elements and also with display: inline-block.

answered Sep 20 '13 at 23:02

Netsurfer

5,543
2
29
34

You're right, it had something to do with white space on the markup, altough I couldn't see anything, but after I joined every line in one it stopped. Thanks. – yoda Sep 20 '13 at 23:09
Yes, the line breaks in the code become a white space and cause a 4px width space. To remove the line breaks from the code is one of the 2 options. The other option is what @Shekhar Sharma mentioned in his answer about the font sizes (parent font-size: 0; so the white space character has a width of 0px, but it is still there. That's why I prefer the other option). – Netsurfer Sep 20 '13 at 23:14
Removing whitespace is not always possible, right? and not very convenient way when you program your HTML. – absqueued Sep 21 '13 at 00:12
Right! When you write or dynamically create you code by yourself, it should be no problem. But if you include code from foreign sources it might be problematic. Nevertheless `display: inline-block` often has some advantages over `float` (which also has its drawbacks) even though it is a bit _fragile_ and you have to watch out not being trapped ...! ;-) – Netsurfer Sep 21 '13 at 07:04

score 3 · Answer 2 · answered Sep 20 '13 at 23:04

3

Yoda,

This happens due to display type of the .item element. When you set display:inline-block it does not stacks elements without leaving space. Like when you set float:left, elements at stacked to each other without space.

The fix is to set font-size:0 to parent element. In your case #gallery should have font-size:0 and you are good to go.

answered Sep 20 '13 at 23:04

absqueued

3,013
3
21
43

This works perfect in my case. had a container with text-align:center and inside the container had inline-block elements. When I would dynamically load more inline-block elements on the page they would shift slightly, but adding font-size:0 made them stay aligned perfectly. This only happened when text-align center active, left align or right align was ok... NOTE: surprisingly firefox was the only browser that could do the process smoothly without needing font-size:0, comon chrome and safari ketchup! :) – SlickRemix Jul 09 '15 at 16:02

score 1 · Answer 3 · answered Sep 20 '13 at 23:09

display: inline-block means that the elements are handled both as inline (like words) and blocks (like divs or images). This means they will have line-height, word spacing, and word-wrapping, and will be affected by text-align, just like inline-elements. Try setting:

word-spacing: 0;

after

display: inline-block;

to confirm if this fixes it.

CSS - odd margin between inline-block elements

3 Answers3