Mysterious Whitespace Between "inline-block" Divs

I have a layout like this: Fiddle link Between .td's is some white-space, even if margin and padding is set to 0. Why is this happening and how to fix this? Negative margin-left ma

Solution 1:

Solution 1: Add comments:

<divclass="tr"style="width: 150px;"><divclass="td"style="width: 50px; background-color: #CCC;"></div><!--
    --><divclass="td"style="width: 50px; background-color: #AAA;"></div><!--
    --><divclass="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;
}

Solution 2:

use float

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

Solution 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! ;)

Solution 4:

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/

Solution 5:

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

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

Hope this helps