Удалить интервал между пролетами используя css

Question

По какой-то причине я не могу избавиться от вертикального расстояния между этими двумя промежутками, я знаю, что упускаю что-то простое, но любая помощь будет признательна.

Проблема, с которой я столкнулся, заключается в значительном вертикальном промежутке между этими двумя промежутками:

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

Answer 1

Это исправлено.Поэтому без каких-либо изменений просто добавьте одно свойство CSS в ваш код.

.nomargin {
   margin: 0px;
   border-collapse: collapse;
   display: block;
}

Кроме того, полный код находится на скрипке: http://jsfiddle.net/ehn7dzxc/18/

Answer 2

Вы можете добавить display: block; к вашему 2-му промежутку.Кажется, для меня все получилось

Так что ваш класс .zeroeight должен выглядеть примерно так

.zeroeight {
 font-size: 06vm; /* fallback for IE */
 font-size: 06vmin;
 display: block;
}

Я предполагаю, что этот класс используется в другом месте, поэтому вы можете найти лучшее решениечтобы применить этот стиль к этому основанию span

См. http://jsfiddle.net/ehn7dzxc/13/

Answer 3

Вы должны удалить <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 */
}

Answer 4

	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>