Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Mysterious whitespace between "inline-block" divs [duplicate]

Tags:

html

css

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>
like image 401
Kristian Avatar asked Aug 16 '12 07:08

Kristian


2 Answers

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;
}
like image 126
Nikola K. Avatar answered Sep 23 '22 17:09

Nikola K.


use float

.td {
    float: left;
    height: 20px;
    margin: 0;
    padding: 0;
 }
like image 33
GajendraSinghParihar Avatar answered Sep 20 '22 17:09

GajendraSinghParihar