取りたい

表示サンプル

「56×22」の部分は画像です。画像の下部分に余白が出てしまいます。
これをなくしたい。（確認環境はChrome59）

余白が出てしまうコード

index.html


	<div class="table">
		<div class="table-row">
			<div class="table-cell">
			<img src="img/hogehoge.png">
					</div>
			<div class="table-cell">
			ほげほげ
			</div>
			<div class="table-cell">
			<img src="img/hogehoge.png">
					</div>
			<div class="table-cell">
			ほげほげ
			</div>
		</div>

		<div class="table-row">
			<div class="table-cell">
			<img src="img/hogehoge.png">
					</div>
			<div class="table-cell">
			ほげほげ
			</div>
			<div class="table-cell">
			<img src="img/hogehoge.png">
					</div>
			<div class="table-cell">
			ほげほげ
			</div>
		</div>


...


</div>

style.css


/*テーブル指定*/
.table {
	display: table;
	line-height: 0;
}

/*セルのクラス指定*/
.table-cell {
	display: table-cell;
	vertical-align:middle;
}	

/*rowクラス指定*/
.table-row {
	display: table-row;
}

/*奇数番目のセルのスタイル*/
.table-cell:nth-child(odd) {
	width: 50px;
	text-align: left;
}	

/*偶数番目のセルのスタイル*/
.table-cell:nth-child(even) {
	background: #CCC;/*わかりやすくするための背景色*/
	border-bottom: solid 1px #000;/*わかりやすくするためのボーダー*/
	width: 60px;
	text-align: right;
}

解決策

line-height:0;をテーブル指定に入れてあげたら余白が無くなった。

style.css

/*テーブル指定*/
.table {
	display: table;
	line-height: 0;
}

原理

ちなみに原理がわかりません……
display:table 関連はmarginが利かないあたりが関連しているのかも……？
もし、仕組みがわかる方がいれば教えてください。