Extra Space Between inline-block DIV Elements [duplicate]

Answer 1

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

Answer 2

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/

Answer 3

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>