“在线块”之间的神秘空白divs [英] Mysterious whitespace between "inline-block" divs

问题描述

我有这样的布局：小提琴链接

在.td之间是一些空格，即使margin和padding设置为0.

为什么会发生这种情况，如何解决这个问题？左边可能是负边距？或任何更好的解决方案？

 < 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 =trstyle =width：150px;> 
< div class =tdstyle =width：50px; background-color：#CCC;>< / div> 
< div class =tdstyle =width：50px; background-color：#AAA;>< / div> 
< div class =tdstyle =width：50px; background-color：＃666;>< / div> 
< / div> 
  
 $> 
 
 解决方案1：评论：
 < div class =trstyle =width：150px; 
< div class =tdstyle =width：50px; background-color：#CCC;>< / div><！ -  
  - >< div class =tdstyle =width：50px; background-color：#AAA;>< / div><！ -  
  - >< div class =tdstyle = width：50px; background-color：＃666;>< / div> 
< / div> 
  
你可以在同一行写一切，但看起来更清晰。 > 
 
 
 
 
 
 解决方案2：添加 font-size：0 到父元素。不要忘记为子元素定义字体大小：
  .tr {
 font-size：0; 
} 
 .td {
 font-size：15px; 
} 
  
 
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;
}


                        
这篇关于“在线块”之间的神秘空白divs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！