Mysterious whitespace between “inline-block” divs [duplicate]

Answer 1

use float

.td {
    float: left;
    height: 20px;
    margin: 0;
    padding: 0;
 }

Answer 2

Solution 1: Add comments:

<div class="tr" style="width: 150px;">
    <div class="td" style="width: 50px; background-color: #CCC;"></div><!--
    --><div class="td" style="width: 50px; background-color: #AAA;"></div><!--
    --><div class="td" style="width: 50px; background-color: #666;"></div>
</div>

You can write everything on the same line, too, but it looks cleaner with comments.

---

Solution 2: Add font-size:0 to the parent element. Don't forget to define the font-size for child elements:

.tr {
  font-size: 0;
}
.td {
  font-size: 15px;
}

Answer 3

The sapces/linebreakes between your inline-block elementes are displayed by the browser. You can remove them, but possible better use some sort of floating on your td class.

I am not sure what kind of data you are trying to display with your markup, but for tabular data the use of tables is perfectly finde! ;)

Answer 4

To overcome this issue you have to hav your divs in one line:

<div class="td" style="width: 50px; background-color: #CCC;"></div><div class="td" style="width: 50px; background-color: #AAA;"></div><div class="td" style="width: 50px; background-color: #666;"></div>

Hope this helps

Answer 5

Inline-blocks are treated as inline elements so empty spaces separate them as usual words in parent element.

I propose 2 solutions:

1. You can fix it by removing spaces between inline-block divs, like this: http://jsfiddle.net/f3AKu/

2. You can set font-size of container to 0 so spaces won't be noticeable. This way you won't modify HTML markup, only CSS rules. Example: http://jsfiddle.net/wC68h/

Answer 6

My preferred way to accomplish zero space between inline-blocks was in CSS, with the parent having font-size:0 and child having font-size:16px. That said, there are a few other ways to do it with HTML and CSS. Here's a live pen:

http://codepen.io/chriscoyier/pen/hmlqF