與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例子

---

使用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沒有關系，但與顯示有關：內聯和內聯塊。

Answer 2

在這個小提琴我只是使用刪除空間

float:left;

http://jsfiddle.net/dd7h7/5/

Answer 3

內聯塊正在添加不必要的空間。 你可以用字體大小做一點技巧：

.widget {
    display:block;
    margin:0px;
    padding:0px;
    font-size: 0;
}

.button {
    display:inline-block;
    border:1px solid red;
    margin:0px;
    padding:0px;
    font-size: initial;
}

Answer 4

我想你應該補充一下

float:left 

至

.button

所以CSS應該是這樣的

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

希望，那會有所幫助。 :)