테이블(박스)에 상하 공백 문제 - 테이블 줄사이 간격이 넓어질 때

다른 스킨에선 정상적으로 보이던 테이블이 스킨을 바꾸면 상하 간격이 넓어지면서 공백이 생기는 경우가 있다. 원인을 몰라서 한참을 헤맸는데 결국 찾아냈다.

바로 <p> 태그 때문. 반드시 그러하다고 확답은 못하지만.. 일단 <p> 태그를 제외하니 상하 간격이 정상적으로 돌아왔다. 아래와 같이 <p>태그가 사용되고 있다면, 이를 제거하고 <br> 태그 등으로 바꿔줘야 한다. 자세한 건 직접 테스트 해보자.

<p><br /></p>

<p><table class="txc-table" width="790" cellspacing="0" cellpadding="0" border="0" style="border:none;border-collapse:collapse;;font-family:돋움;font-size:12px"><tbody><tr><td style="width:263;height:24;border-bottom:1px solid #ccc;border-right:1px solid #ccc;border-top:1px solid #ccc;border-left:1px solid #ccc;;"><p>&nbsp;네트워크</p></td>

<td style="width:263;height:24;border-bottom:1px solid #ccc;border-right:1px solid #ccc;border-top:1px solid #ccc;;"><p>&nbsp;열린 영어와 그 적들</p></td>

<td style="width:263;height:24;border-bottom:1px solid #ccc;border-right:1px solid #ccc;border-top:1px solid #ccc;;"><p>티스토리&nbsp;</p></td>

</tr>

<tr><td style="width:263;height:24;border-bottom:1px solid #ccc;border-right:1px solid #ccc;border-left:1px solid #ccc;;"><p>&nbsp;블로그</p></td>

<td style="width:263;height:24;border-bottom:1px solid #ccc;border-right:1px solid #ccc;;"><p>추석&nbsp;</p></td>

<td style="width:263;height:24;border-bottom:1px solid #ccc;border-right:1px solid #ccc;;"><p>마우스&nbsp;</p></td>

</tr>

<tr><td style="width:263;height:24;border-bottom:1px solid #ccc;border-right:1px solid #ccc;border-left:1px solid #ccc;;"><p>&nbsp;하늘</p></td>

<td style="width:263;height:24;border-bottom:1px solid #ccc;border-right:1px solid #ccc;;"><p>서태지&nbsp;</p></td>

<td style="width:263;height:24;border-bottom:1px solid #ccc;border-right:1px solid #ccc;;"><p>류현진</p></td>

</tr>

</tbody></table></p>

<p><br /></p>