如何从css表中删除边距和填充

Question

I want to remove the spacing between the 2 rows. The table is a css only table.

JS Fiddle: https://jsfiddle.net/n841wvwn/

CSS:

* {
    padding: 0px;
    margin: 0px;
}

div.table {
    display: table;
    border-collapse: collapse;
    table-layout:fixed;
}

div.tr {
    display: table-row;
}

div.td {
    display: table-cell;
    padding:0; margin:0;
}

.button {
    width: 88px;
    height: 55px;
    border: none;
    margin: 0px;
    padding: 0px;
}



#ac {
    background-image: url('http://i.imgur.com/u9znwQK.png');
    background-size: 100%;
}

#ce {
    background-image: url('http://i.imgur.com/azae5uQ.png');
    background-size: 100%;
}

#multiplication {
    background-image: url('http://i.imgur.com/veBf82o.png');
    background-size: 100%;
}


#division {
    background-image: url('http://i.imgur.com/i6KcXGr.png');
    background-size: 100%;
}


#number7 {
    background-image: url('http://i.imgur.com/0GixHJ5.png');
    background-size: 100%;
}

HTML:

<div class="container">
        <div class="table" id="calculator">
            <div class="tr">
                <div class="td" id="display"></div>
            </div>
            <div class="tr">
                <div class="td">
                    <button class="button" id="ac"></button>
                </div>
                <div class="td">
                    <button class="button" id="ce"></button>
                </div>
                <div class="td">
                    <button class="button" id="division"></button>
                </div>
                <div class="td">
                    <button class="button" id="multiplication"></button>
                </div>
            </div>
            <div class="tr">
                <div class="td">
                    <button class="button" id="number7"></button>
                </div>
            </div>
        </div>
    </div>

Between this circle I want no spacing. http://i.imgur.com/a3wMyLA.png

The layout is based on a table div, which has table-layout fixed and display table. Also I have border-collapse set to collapse and every padding and margin to 0px.

For some reason the button is 55 px but the div is 59 pixel in height.

Answer 1

add font-size:0; as below :

div.td {
  display: table-cell;
  padding:0; margin:0;
  font-size:0;
}

This will solve your problem. But this will only work if u do not have any text inside the td element like in the case u showed.

Answer 2

Apparently, it is due to the line-height of the table-cell . You can explicitly set it to 0.8 to solve the problem:

div.td {
    line-height: 0.8;
}

Answer 3

This happens only in Chrome and IE (not in Firefox, interesting...), and you can fix it on this way, too:

.button {
  display:block;
}

So, button is by default - inline element (and that's the cause of this small gap), and this way it will fill 100% height...

https://jsfiddle.net/n841wvwn/12/

Answer 4

As an alternative to all the solutions given, you can also align the buttons to the top of the table cells. That will work as well.

.button {
  width: 88px;
  height: 55px;
  border: none;
  margin: 0px;
  padding: 0px;
  vertical-align: top; /* added */
}

 * { padding: 0px; margin: 0px; } div.table { display: table; border-collapse: collapse; table-layout: fixed; } div.tr { display: table-row; } div.td { display: table-cell; padding: 0; margin: 0; } .button { width: 88px; height: 55px; border: none; margin: 0px; padding: 0px; vertical-align: top; /* added */ } #ac { background-image: url('http://i.imgur.com/u9znwQK.png'); background-size: 100%; } #ce { background-image: url('http://i.imgur.com/azae5uQ.png'); background-size: 100%; } #multiplication { background-image: url('http://i.imgur.com/veBf82o.png'); background-size: 100%; } #division { background-image: url('http://i.imgur.com/i6KcXGr.png'); background-size: 100%; } #number7 { background-image: url('http://i.imgur.com/0GixHJ5.png'); background-size: 100%; } 

 <div class="container"> <div class="table" id="calculator"> <div class="tr"> <div class="td" id="display"></div> </div> <div class="tr"> <div class="td"> <button class="button" id="ac"></button> </div> <div class="td"> <button class="button" id="ce"></button> </div> <div class="td"> <button class="button" id="division"></button> </div> <div class="td"> <button class="button" id="multiplication"></button> </div> </div> <div class="tr"> <div class="td"> <button class="button" id="number7"></button> </div> </div> </div> </div> 

Answer 5

Update your css as follows

 #number7 {
        background-image: url('http://i.imgur.com/0GixHJ5.png');
        background-size: 100%;
            position:relative;
            top:-4px;
    }