Mysterious whitespace between "inline-block" divs

Question

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 maybe? Or any better solutions?

<style>
.tr {
    height: 20px;
    border: 1px solid black;
    overflow: hidden;
    white-space: nowrap;
    word-spacing: 0;
}
.td {
    display: inline-block;
    height: 20px;
    margin: 0;
    padding: 0;
}
</style>
<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>

score 12 · Accepted Answer · answered Aug 16 '12 at 07:09

12

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;
}

answered Aug 16 '12 at 07:09

Nikola K.

7,093
13
31
39

nice one, solution 2 quite easy to implement, 1 up! – Nag Hammadi May 15 '13 at 18:05
When using HAML, I can avoid whitespace from being rendered inside and outside the tag with `%div<>` – Peter Ehrlich Jun 25 '13 at 02:49

score 2 · Answer 2 · answered Aug 16 '12 at 07:06

2

use float

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

answered Aug 16 '12 at 07:06

GajendraSinghParihar

9,051
11
36
64

I was using float, but it pushed third box to new line when width: 60px was applied. – Kristian Aug 16 '12 at 07:14
yes because the width of parent is less then the combine width of children so either you can increase width of parent or you can comment the extra space in the inline divs example: http://jsfiddle.net/bysMR/7/ – GajendraSinghParihar Aug 16 '12 at 07:21

score 0 · Answer 3 · answered Aug 16 '12 at 07:09

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

score 0 · Answer 4 · answered Aug 16 '12 at 07:15

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

I propose 2 solutions:

You can fix it by removing spaces between inline-block divs, like this: http://jsfiddle.net/f3AKu/
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/

score 0 · Answer 5 · answered Aug 16 '12 at 07:18

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

score 0 · Answer 6 · answered Dec 24 '14 at 19:02

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

Mysterious whitespace between "inline-block" divs

6 Answers6

Linked