关于 html：如何从 css 表中删除边距和填充


How to remove margin and padding from css table

我想删除 2 行之间的间距。
该表是仅 CSS 表。

JS 小提琴：https://jsfiddle.net/n841wvwn/

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
* {
    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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
                    <button class="button" id="ac"></button>
               
               
                    <button class="button" id="ce"></button>
               
               
                    <button class="button" id="division"></button>
               
               
                    <button class="button" id="multiplication"></button>
               
           
           
               
                    <button class="button" id="number7"></button>

在这个圆圈之间我不希望有间距。 http://i.imgur.com/a3wMyLA.png

布局是基于一个table div，它有table-layout 固定和显示table。此外，我将边框折叠设置为折叠，并将每个填充和边距设置为 0px。

由于某种原因，按钮为 55 像素，但 div 的高度为 59 像素。

相关讨论

添加 font-size:0; 如下：

1
2
3
4
5
div.td {
  display: table-cell;
  padding:0; margin:0;
  font-size:0;
}

这将解决您的问题。但这仅适用于您在 td 元素内没有任何文本的情况下，就像您展示的情况一样。

相关讨论

显然是由于table-cell的line-height。您可以将其显式设置为 0.8 以解决问题：

1
2
3
div.td {
    line-height: 0.8;
}
相关讨论

这仅在 Chrome 和 IE 中发生(在 Firefox 中没有，有趣...)，您也可以通过这种方式修复它：

1
2
3
.button {
  display:block;
}

所以，按钮默认是内联元素(这就是造成这个小间隙的原因)，这样它将填充 100% 高度...

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

作为所有给定解决方案的替代方案，您还可以将按钮与表格单元格的顶部对齐。这也行。

1
2
3
4
5
6
7
8
.button {
  width: 88px;
  height: 55px;
  border: none;
  margin: 0px;
  padding: 0px;
  vertical-align: top; /* added */
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
* {
  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%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
        <button class="button" id="ac"></button>
     
     
        <button class="button" id="ce"></button>
     
     
        <button class="button" id="division"></button>
     
     
        <button class="button" id="multiplication"></button>
     
   
   
     
        <button class="button" id="number7"></button>

如下更新你的css

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