与css显示和表格单元格的不需要的间距

Question

在css中使用时,我很难理解表格和表格单元格的本质.

请考虑以下内容: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;
}

我试图制作一个包含一些按钮的小部件,它们彼此并排放置.但我不明白红盒子之间的空间来自哪里.我怎么摆脱它？

谢谢

Answer 1

内联元素(在您的情况下为.button div)对空白区域敏感,您可以通过各种方式摆脱该空间,包括:

• 删除元素之间的空间
• 使用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例子

使用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>

jsFiddle例子

使用float的示例:

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

jsFiddle例子

所以简而言之,这与display:table-cell没有关系,但与显示有关:内联和内联块.