vertical-align

이미지 아래의 여백 조정

이미지를 td 안에 꽉차게 넣을때 img element 뒤에 줄바꿈이 있으면 cellpadding 을 0으로 해도 이미지들이 정확히 붙지 않는다. 이는 줄바꿈이 IE 에서는 한칸의 공백으로 인식이 되고 이 공백과 img element 의 하단 경계가 맞지 않아서 이다. 하단 경계가 공백이 더 낮아서 전체적으로 inline block 의 height 가 높아지는 것이다. 이는 CSS 의 vertical-align 속성으로 해결 할 수 있다.

공백이 생기지 않게 하기 위해서 td 와 img 사이의 공백을 없애야만 했다.

<table cellpadding="0" cellspacing="0">
	<tr>
		<td><img src="image.gif" alt=""></td>
	</tr>
	<tr>
		<td><img src="image.gif" alt=""></td>
	</tr>
</table>

이것을 이렇게 vertical-align 속성을 이용해서 해결 할 수 있다.

<table cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<img src="image.gif" alt="" style="vertical-align: top;">
		</td>
	</tr>
	<tr>
		<td>
			<img src="image.gif" alt="">
		</td>
	</tr>
</table>

display: block;도 같은 효과를 보여준다.