由于某种原因，我似乎无法摆脱这两个跨度之间的垂直间距，我知道我缺少一些简单的东西，但是可以提供任何帮助。
我遇到的问题是，这两个跨度之间显示出很大的垂直空间：
<span class="twentyeight nomargin threshold_green">6</span>
<br style="display:none;">
<div style="clear:both;"></div>
<span class="zeroeight nomargin threshold_green">(04:32)</span>
完整的代码摆在摆弄的位置，这比尝试在此处发布代码干净得多。 http://jsfiddle.net/ehn7dzxc/2/
答案 0 :(得分：0)
window.onload = function(){
var cells = ["1_1_H","1_1_B","1_1_F","1_2_H","1_2_B","1_2_F","1_3_H","1_3_B","1_3_F","2_1_H","2_1_B","2_1_F","2_2_H","2_2_B","2_2_F","2_3_H","2_3_B","2_3_F"];
get_cellHF(cells,"CCC_CCT_VOICE");
};html, body, .outer {
height: 100%;
width: 100%;
margin: 0;
overflow:hidden;
}
div.outer {
display: table;
}
table.actionBoard {
font-family: "Arial Black", Gadget, sans-serif;
border: 0px solid #FFFFFF;
background-color: #000000;
width: 100%;
height: 100%;
text-align: center;
border-collapse: collapse;
position: absolute;
table-layout: fixed;
}
table.actionBoard td, table.actionBoard th {
border: 1px solid #AAAAAA;
padding: 3px 2px;
}
table.actionBoard tbody td {
font-size: 25px;
font-weight: bold;
color: #FFFFFF;
}
table.actionBoard tfoot td {
font-size: 14px;
}
div.cell_container {
position: relative;
width: 100%;
height: 100%;
}
div.cell_block {
position: absolute;
width: 100%;
height: 100%;
display: table;
}
div.cell_body {
font-size: 72px;
color: #FFFFFF;
position: relative;
height: 95%;
width: 100%;
border-collapse: collapse;
text-align: center;
display: table-cell;
vertical-align: middle;
top: -10%;
}
div.cell_header {
font-size: 2.5vh;
color: #FFFFFF;
position: relative;
height: 5%;
width: 100%;
border-collapse: collapse;
text-align: center;
display: table-row;
top: 0px;
}
div.cell_footer {
font-size: 2vh;
font-family: "Arial", Gadget, sans-serif;
color: #FFFFFF;
position: relative;
height: 5%;
width: 100%;
border-collapse: collapse;
text-align: center;
display: table-row;
top: 5%;
}
.threshold_green {
color: #00FF00;
}
.threshold_orange {
color: #FF8800;
}
.threshold_red {
color: #FF0000;
}
.threshold_white {
color: #FFFFFF;
}
.threehundred {
font-size: 35vm; /* fallback for IE */
font-size: 35vmin;
}
.thirtyfive {
font-size: 35vm; /* fallback for IE */
font-size: 35vmin;
}
.thirtyzero {
font-size: 29vm; /* fallback for IE */
font-size: 30.5vmin;
}
.twentyeight {
font-size: 26vm; /* fallback for IE */
font-size: 27.5vmin;
}
.twentyfive {
font-size: 18vm; /* fallback for IE */
font-size: 19.5vmin;
}
.tenfive {
font-size: 10vm; /* fallback for IE */
font-size: 10vmin;
}
.zeroeight {
font-size: 06vm; /* fallback for IE */
font-size: 06vmin;
}
.nomargin {
margin: 0px;
border-collapse: collapse;
}
.aligntop {
vertical-align: top;
}
a {
text-decoration: none;
}<html>
<head>
<link rel="stylesheet" href="base.css?time=6" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div class="outer">
<table class="actionBoard">
<tbody><tr>
<td colspan="2" id="cell1_1">
<div class="cell_container">
<div class="cell_block">
<div class="cell_header" id="cell1_1_H"></div>
<div class="cell_footer" id="cell1_1_F"></div>
<div class="cell_body" id="cell1_1_B"></div>
</div>
</div>
</td>
<td colspan="2" id="cell1_2">
<div class="cell_container">
<div class="cell_block">
<div class="cell_header" id="cell1_2_H"></div>
<div class="cell_footer" id="cell1_2_F"></div>
<div class="cell_body" id="cell1_2_B">
<a href="fake.html" target="_blank">
<span style='display:block' class="twentyeight nomargin threshold_green">6</span>
<div style="clear:both;"></div>
<span style='display:block' class="zeroeight nomargin threshold_green">(04:32)</span>
</a>
</div>
</div>
</div>
</td>
<td colspan="2" id="cell1_3">
<div class="cell_container">
<div class="cell_block">
<div class="cell_header" id="cell1_3_H"></div>
<div class="cell_footer" id="cell1_3_F"></div>
<div class="cell_body" id="cell1_3_B"></div>
</div>
</div>
</td>
</tr><tr>
<td colspan="2" id="cell2_1">
<div class="cell_container">
<div class="cell_block">
<div class="cell_header" id="cell2_1_H"></div>
<div class="cell_footer" id="cell2_1_F"></div>
<div class="cell_body" id="cell2_1_B"></div>
</div>
</div>
</td>
<td colspan="2" id="cell2_2">
<div class="cell_container">
<div class="cell_block">
<div class="cell_header" id="cell2_2_H"></div>
<div class="cell_footer" id="cell2_2_F"></div>
<div class="cell_body" id="cell2_2_B"></div>
</div>
</div>
</td>
<td colspan="2" id="cell2_3">
<div class="cell_container">
<div class="cell_block">
<div class="cell_header" id="cell2_3_H"></div>
<div class="cell_footer" id="cell2_3_F"></div>
<div class="cell_body" id="cell2_3_B"></div>
</div>
</div>
</td>
</tr></tbody>
</table>
</div>
</body>
</html>
答案 1 :(得分：0)
您可以在第二个跨度中添加display: block;。似乎已经为我完成了窍门
所以您的.zeroeight类应该看起来像这样
.zeroeight {
font-size: 06vm; /* fallback for IE */
font-size: 06vmin;
display: block;
}
我假设此类在其他地方使用，因此您可能希望找到一个更好的解决方案，以将此样式应用于底部的span
答案 2 :(得分：0)
您应该删除<br>和<div>，以便仅拥有以下内容：
<span class="twentyeight nomargin threshold_green">6</span>
<span class="zeroeight nomargin threshold_green">(04:32)</span>
您拥有的多余空间来自默认的line-height: normal。您可以通过将以下内容应用于CSS来覆盖它：
.nomargin {
display: block; /* to honor the line break since we're removing the <br> and <div>
line-height: 1; /* this is your spacing fix */
}
答案 3 :(得分：0)
是固定的。因此，无需做任何更改，只需在代码中添加一个CSS属性即可。
.nomargin {
margin: 0px;
border-collapse: collapse;
display: block;
}
此外，完整的代码也摆在小提琴上： http://jsfiddle.net/ehn7dzxc/18/