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

I am having difficulties in understanding the nature of table and table-cell when used in css.

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

Consider the following: http://jsfiddle.net/dd7h7/3/.

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

Im trying to make a widget containing some buttons, that are positioned alongside each other. But I don't understand where the space between the red boxes comes from. How do I get rid of it?

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

Thanks

4 个解决方案

#1

Inline elements (in your case the .button divs) are sensitive to white space, you can get rid of that space in a variety of ways, including:

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

• Removing the space between the elements

删除元素之间的空间

• Using HTML comments (<!-- -->) to occupy the gap

使用HTML注释( )来占据差距

• Floating the elements left

浮动元素

Example of removing the white space between elements:

删除元素之间的空白区域的示例:

<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

---

Example of using HTML comments:

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

---

Example of using float:

使用float的示例:

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

jsFiddle example

So in short this really doesn't have to do with display:table-cell but everything to do with display:inline and inline-block.

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

#2

in this fiddle i removed the space simply using

在这个小提琴我只是使用删除空间

float:left;

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

#3

inline-block is adding that unnecessary space. You can do a little trick with font size:

内联块正在添加不必要的空间。你可以用字体大小做一点技巧:

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

#4

I think you should add

我想你应该补充一下

float:left 

to

.button

so CSS should be like this

所以CSS应该是这样的

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

Hope, that will help. :)

希望,那会有所帮助。 :)