Extra Space Between inline-block DIV Elements

Question

I am creating a fluid layout using the CSS column layout module and am seeing unexpected results when 2 or more elements are in the same 'row' of a column. A 3 to 4 px gap will appear between the elements. I've tested in IE11, FireFox 24, Chrome 31, and Safari 5.1.7 and they all exhibit the same behavior.

<div class="tile-container">
    <div class="tile-large">1</div>
    <div class="tile-wide">2</div>
    <div class="tile-small">3</div>
    <div class="tile-small">4</div>
    <div class="tile-small">5</div>
    <div class="tile-small">6</div>
    <div class="tile-wide">7</div>
    <div class="tile-large">8</div>
</div>

.tile-container {
    -moz-column-width: 250px;
    -webkit-column-width: 250px;
    column-width: 250px;
    column-fill: auto;
    height: 502px;
    background-color: gray;
}

.tile-large {
    width: 250px;
    height: 250px;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    display: inline-block;
    background-color: green;
}

.tile-wide {
    width: 250px;
    height: 125px;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    display: inline-block;
    background-color: blue;
}

.tile-small {
    width: 125px;
    height: 125px;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    display: inline-block;
    background-color: red;
}

I don't want to start using negative margins to close the gap as I want to introduce drag/drop behavior. Float left will remove the gap, but that introduces another set of issues. Oddly enough, when I use jQueryUI sortable, after the drop event and jQueryUI arranges the elements, the gap is no longer there.

This is a result of "invisible" spacing between your inline-block elements. If you were to remove the newline between the divs the gaps would be removed as well. See the duplicate for some common workarounds. — Travis J, Dec 02 '13 at 19:06
@TravisJ Thanks for your help, that article you linked is spot on. — Rob J, Dec 02 '13 at 19:25
-1 There is about 100 questions on StackOverflow about this same question. Here is what you can do, http://css-tricks.com/fighting-the-space-between-inline-block-elements/. — Josh Powell, Dec 02 '13 at 19:54

score 11 · Accepted Answer · answered Dec 02 '13 at 19:06

You need to comment out the white space between the elements, like so:

<div class="tile-container">
       <div class="tile-large">1</div><!--
    --><div class="tile-wide">2</div><!--
    --><div class="tile-small">3</div><!--
    --><div class="tile-small">4</div><!--
    --><div class="tile-small">5</div><!--
    --><div class="tile-small">6</div><!--
    --><div class="tile-wide">7</div><!--
    --><div class="tile-large">8</div>
</div>

DEMO: http://jsfiddle.net/P7cbA/11/

Another way is to put the elements in the HTML in one line without any spaces between them, but this reduces the code readability:

<div class="tile-container">
       <div class="tile-large">1</div><div class="tile-wide">2</div><div class="tile-small">3</div><div class="tile-small">4</div><div class="tile-small">5</div><div class="tile-small">6</div><div class="tile-wide">7</div><div class="tile-large">8</div>
</div>

Nice suggestion. This is not brought up in any of the duplicate answers. +1 for uniqueness — Travis J, Dec 02 '13 at 19:07

score 2 · Answer 2 · answered May 06 '14 at 23:14

2

You're seeing the whitespace between your div elements. Remove the whitespace from your HTML, or set the font-size of the container to zero so the spaces don't get rendered.

.tile-container {
    font-size: 0
}
.tile-container > div {
    font-size: 14px; /* Or whatever you like. */
}

answered May 06 '14 at 23:14

Mike M. Lin

9,992
12
53
62

I think I like this solution more since the suggestion from css-tricks.com says that the negative margin value depends on the parent's font-size. – jroi_web Jan 22 '15 at 07:30

score 1 · Answer 3 · answered Dec 02 '13 at 19:08

That issue is the generated white-space between inline-block elements. One way to avoid this is adding a negative margin:

.tile-large, .tile-wide, .tile-small {
  display:inline-block;
  margin-right:-4px;
}

_{That value can change depend on parents font-size}

The demo http://jsfiddle.net/P7cbA/7/

There are more options to delete that space choose the best for your taste, you can check a good article http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Extra Space Between inline-block DIV Elements

3 Answers3

Linked

Related