问题描述:

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

Consider the following: 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

网友答案:

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:

  • Removing the space between the elements
  • Using HTML comments (<!-- -->) to occupy the gap
  • 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:

<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:

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

网友答案:

in this fiddle i removed the space simply using

float:left;

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

网友答案:

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;
}
网友答案:

I think you should add

float:left 

to

.button

so CSS should be like this

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

Hope, that will help. :)

相关阅读:
Top