table 에서 width=100%와 margin 주기 정보
table 에서 width=100%와 margin 주기본문
http://css-discuss.incutio.com/?page=BoxModelHack
를 보면
<table width=100% style="margin:10px;"> 이렇게 하면
테이블이 100% 크기 보다 20px 커지는 문제가 IE에서늘 발생하는데
이런 문제를 해결하는 좋은 방법을 알고 계신 분 조언 부탁합니다.
를 보면
<table width=100% style="margin:10px;"> 이렇게 하면
테이블이 100% 크기 보다 20px 커지는 문제가 IE에서늘 발생하는데
이런 문제를 해결하는 좋은 방법을 알고 계신 분 조언 부탁합니다.
댓글 전체
margin 0이 아닌 이상 당연히 밀려나는 것인데... ㅡ.ㅡ,,
원하고자 하는 목적이 무엇인지 모르겠네요.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
원하고자 하는 목적이 무엇인지 모르겠네요.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
가로 크기가 얼마인지 모르는 상태에서 양쪽에 여백을 주려고 하는데
IE는 표준 대로 동작하지 않습니다. 위 링크로 보시면......
IE는 표준 대로 동작하지 않습니다. 위 링크로 보시면......
저도 테스트해보니 말씀하신대로 IE 는 표준대로 동작하지 않는군요....
불여우에서는 잘 되는데...^^
불여우에서는 잘 되는데...^^
style="margin:10px; 은 이 소스가 들어간 테이블의 외부쪽의 margin 을 뜻하는것인데,
내부냐,외부냐의 혼란이 있으신듯 하군요....^^
테이블 내부에 배경색을 넣어보시면 바로 이해하실듯 합니다...
내부냐,외부냐의 혼란이 있으신듯 하군요....^^
테이블 내부에 배경색을 넣어보시면 바로 이해하실듯 합니다...
테이블 크기(width)에 margin이나 padding이 포함 되는가 아닌가 문제입니다.
그리고 margin에는 배경색이 안 나오구요.
그리고 margin에는 배경색이 안 나오구요.
당연히 상하좌우로 10px씩 늘어난 결과가 되겠지요.
마진은 종속된 속성에서 상위로부터 탈피하여 단일의 속성을 정하고
페딩은 해당 구역전체에 속성을 줍니다.
td padding:10px; 는 td 안에서 어떤 객체를 표시할때 네군데의 사이띄기를 하라 입니다.
padding 을 하나만 쓰면 디폴트로 4군데가 먹는 결과 입니다.
개개로 하려면 padding-top:7px; padding-bottom:5px; 이런식이 되겠지요.
줄여서 이렇게도 씁니다.
padding: 9 10 10 5;
이건 시계방향으로 상단 우측 하단 좌측 순으로 페딩의 크기가 먹여집니다.
마진은 이미지와 텍스트를 표시할때 전체적으로 페딩을 주고
이미지에는 마진을 먹이거나
입력란의 셀렉트박스등 상하가 맞지 않을때 보더의 색상을 주고 마진을 주면 잘 맞겠습니다.
입력란의 마진
style='border-width:0 0 0 0; border-color:FFFFFF; border-style:solid; margin:0 0 0 0;' class="cliptimer"
td 의 표시의 페딩
style="width:22px; height:17px; position: relative; padding-top:1px;"
마진은 종속된 속성에서 상위로부터 탈피하여 단일의 속성을 정하고
페딩은 해당 구역전체에 속성을 줍니다.
td padding:10px; 는 td 안에서 어떤 객체를 표시할때 네군데의 사이띄기를 하라 입니다.
padding 을 하나만 쓰면 디폴트로 4군데가 먹는 결과 입니다.
개개로 하려면 padding-top:7px; padding-bottom:5px; 이런식이 되겠지요.
줄여서 이렇게도 씁니다.
padding: 9 10 10 5;
이건 시계방향으로 상단 우측 하단 좌측 순으로 페딩의 크기가 먹여집니다.
마진은 이미지와 텍스트를 표시할때 전체적으로 페딩을 주고
이미지에는 마진을 먹이거나
입력란의 셀렉트박스등 상하가 맞지 않을때 보더의 색상을 주고 마진을 주면 잘 맞겠습니다.
입력란의 마진
style='border-width:0 0 0 0; border-color:FFFFFF; border-style:solid; margin:0 0 0 0;' class="cliptimer"
td 의 표시의 페딩
style="width:22px; height:17px; position: relative; padding-top:1px;"
표준은 width안에 margin까지 포함되는데 IE에는 안 그렇다는 거죠
딱 맞는 마진을 적용하시려면 테이블의 크기에 마진이나 페딩의 크기가 포함되어야 하겠죠.
질문의 흐름으로 보면...표준이야기가 아닌듯 합니다.
<html><body style="background-color:gray;">
<p style="background-color:yellow; width=100px;">
<table width=100% style="margin:0 0 0 0 px;background-color:blue;" >
<tr><td> </td></tr>
</table>
</p>
</body></html>
질문의 흐름으로 보면...표준이야기가 아닌듯 합니다.
<html><body style="background-color:gray;">
<p style="background-color:yellow; width=100px;">
<table width=100% style="margin:0 0 0 0 px;background-color:blue;" >
<tr><td> </td></tr>
</table>
</p>
</body></html>
