Question

在css中使用时，我很难理解table和table-cell的性质。

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无关，但与显示有关：内联和内联块。

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;
}

希望，这会有所帮助。：）

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

4 个答案: