关于 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

在这个圆圈之间我不希望有间距。 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

如下更新你的css

1
2
3
4
5
6

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

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/269140.html

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

How to remove margin and padding from css table

相关推荐

发表回复