html - 不需要的间距与 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 注释 ( <!-- --> ) 填补空白
• 向左浮动元素

移除元素间空白的示例:

<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

---

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

---

使用 float 示例:

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

jsFiddle example

所以简而言之，这实际上与 display:table-cell 无关，而是与 display:inline 和 inline-block 相关。