html - Unwanted spacing with css display and table-cell -

i having difficulties in understanding nature of table , table-cell when used in css.

consider following: http://jsfiddle.net/dd7h7/3/.

html

<div class="widget">   <div class="button">     <div class="content">       <div class="icon">a</div>       <div class="label">abc</div>                 </div>   </div>   <div class="button">     <div class="content">       <div class="icon">b</div>       <div class="label">abcdef</div>                 </div>   </div>   <div class="button">     <div class="content">       <div class="icon">c</div>       <div class="label">abcdefghi</div>                </div>   </div> </div> 

css

.widget {     display:block;     margin:0px;     padding:0px; }  .button {     display:inline-block;     border:1px solid red;     margin:0px;     padding:0px; }  .content {     display:table;     width:100%;     height:100%;     margin:0px;     padding:0px;     border-spacing:0;     border-collapse:collapse;     }  .icon {     display:table-cell;     width:15px;     height:15px;     margin:0px;     padding:0px;     vertical-align:middle;     text-align:center; }  .label {     display:table-cell;     margin:0px;     padding:0px;     padding-left:3px;     vertical-align:middle; } 

im trying make widget containing buttons, positioned alongside each other. don't understand space between red boxes comes from. how rid of it?

thanks

inline elements (in case .button divs) sensitive white space, can rid of space in variety of ways, including:

• removing space between elements
• using html comments (<!-- -->) occupy gap
• floating elements left

example of removing white space between elements:

<div class="widget">     <div class="button">         <div class="content">             <div class="icon">a</div>             <div class="label">abc</div>         </div>     </div><div class="button">         <div class="content">             <div class="icon">b</div>             <div class="label">abcdef</div>         </div>     </div><div class="button">         <div class="content">             <div class="icon">c</div>             <div class="label">abcdefghi</div>         </div>     </div> </div> 

jsfiddle example

---

example of using html comments:

<div class="widget">     <div class="button">         <div class="content">             <div class="icon">a</div>             <div class="label">abc</div>         </div>     </div><!--     --><div class="button">         <div class="content">             <div class="icon">b</div>             <div class="label">abcdef</div>         </div>     </div><!--     --><div class="button">         <div class="content">             <div class="icon">c</div>             <div class="label">abcdefghi</div>         </div>     </div> </div> 

jsfiddle example

---

example of using float:

.button {     display:inline-block;     border:1px solid red;     margin:0px;     padding:0px;     float:left; } 

jsfiddle example

so in short doesn't have display:table-cell display:inline , inline-block.