html table 여백관련 문제
본문
| 이미지1 | |
| 이미지2 | 이미지3 |
| 이미지4 | 이미지5 |
이렇게 표를 짰는데 절대 이미지와 이미지 위아래 간격에 여백이 생기네요..
아주 미쳐버리겠네요.. 여백확인도 철저히 했고 이미지도 여백이 없습니다.
에디트플러스 및 드림위버에서도 다 확인했는데 여백이 생겨버리네요..
뭐가 문제일까요?
<table cellpadding="0" cellspacing="0" width="1294" height="777" border="0">
<tr>
<td align="center"><table border="0" cellpadding="0" cellspacing="0" width="1294" height="777">
<tr>
<td valign="top" width="722" height="777"><img src="img/index001.jpg" border="0" height="777"></td>
<td valign="top" width="572"><table border="0" cellpadding="0" cellspacing="0" width="572" height="700">
<Tr>
<td colspan="2" valign="top" height="264"><img src="img/index003.jpg" border="0" height="264"></td>
</tr>
<tr>
<td valign="top" height="256"><img src="img/index004.jpg" border="0" height="256"></td><td valign="top"><img src="img/index005.jpg" border="0" height="256"></td>
</tr>
<tr>
<td valign="top" height="257"><img src="img/index006.jpg" border="0" height="257"></td><td valign="top"><img src="img/index007.jpg" border="0" height="257"></td>
</tr>
</table>
</td>
</tr>
</table></td>
</tr>
</table>
답변 2
사이트 작업 시
html,body{width:100%;height:100%;}
html{overflow-y:scroll}
body,th,td,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,form,fieldset,p,button{margin:0;padding:0}
body,h1,h2,h3,h4,input,select,button{font-family:dotum,Helvetica,sans-serif;font-size:12px;color:#000}
body{text-align:center;*word-break:break-all;-ms-word-break:break-all}
img,fieldset,iframe{border:0 none}
li{list-style:none}
input,select,button{vertical-align:middle}
img{vertical-align:top}
i,em,address{font-style:normal}
label,button{cursor:pointer}
button{margin:0;padding:0}
a{color:#2f3743;text-decoration:none}
a:hover{color:#390;text-decoration:underline}
button *{position:relative}
button img{left:-3px;*left:auto}
html:first-child select{height:20px;padding-right:6px}
option{padding-right:6px}
hr{display:none}
legend{*width:0}
table{border-collapse:collapse;border-spacing:0}
위처럼 모든 브라우저에서 "엘리먼트" 들을 초기화 시켜주는게 좋습니다.
위는 네이버에 적용 된 코드 입니다.
자문자답입니다.
크롬 브라우저에서 div 태그나 ul li 안에 img 태그를 넣는 경우 img 속성이 inline 이기 때문에 텍스트와 같은 속성으로 인식해서 글자의 베이스라인 만큼 약 5px 가량의 여백이 자동으로 생기게 된다고 하네요
스타일시트에
img{display:block;}
img{vertical-align:top;}
추가하면 됩니다. 이것때문에 몇시간을 끙끙되었네요..