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>
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;
}
use float
.td {
float: left;
height: 20px;
margin: 0;
padding: 0;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With