html table 여백관련 문제

html table 여백관련 문제

QA

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;}

추가하면 됩니다. 이것때문에 몇시간을 끙끙되었네요..

 

답변을 작성하시기 전에 로그인 해주세요.
전체 42
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT