가장 익숙한 것처럼 테이블 대신 레이아웃을 위해 CSS를 완전히 사용하는 첫 번째 프로젝트를 작업하면서 이상한 문제가 발생했습니다. 외관상으로 여백이 내장 된 요소가 있습니다. 즉, "margin-top : 0px"로 설정하면 요소가 아닌 경우와 다르게 렌더링됩니다. IE7에서이 기능을 존중하지 않는 사이트를 테스트 할 때까지 실제로 문제를 알지 못했습니다."내장"여백이있는 HTML 요소
지금까지 h * 요소와 ul 요소에이 점이 있음을 눈치 챘습니다. 아무도 내가 가지고있는 다른 요소를 온라인에서 찾을 수있는 곳을 알고 있습니까? 나는 거의 운이없는 W3C를 검색하려고 노력했다. 모든 현대의 브라우저가이를 올바르게 구현했기 때문에 어딘가에 있다고 확신합니다. 그 정보를 어디에서 찾을 수 있을지 모르겠습니다.
브라우저간에 약간의 차이가있을 수 있지만 CSS 2.1 사양의이 점은 매우 비슷해야합니다. 거의 모든 공통 요소의
당신은 체크 아웃 할 수 있습니다 YUI의 reset.css
http://meyerweb.com/eric/tools/css/reset/
이 다소 유명한 CSS 밖에 재설정됩니다.
그것의 주요 부분 :
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
는 국경/패딩없이 바보 보일 것이다 양식 필드와 같은 몇 결석. 그 중 대부분은 어떤 브라우저에서도 기본 마진을 갖지 않습니다. – bobince
@bobince - 신뢰하지만 확인하십시오. – KakambaWeb
I 부동 요소를 포함 div가 오작동하는 reset.css (http://meyerweb.com/eric/tools/css/reset/) 및 ClearFix (http://www.webtoolkit.info/css-clearfix.html)의 조합을 사용한다.
감사합니다. 다른 답변도 매우 도움이되었지만 특히 이것은 내가 찾던 것이 었습니다. – John
전자 메일 클라이언트의'div' 및'p' 단락의 처리에주의하십시오. 이들은 크게 다릅니다. –
'form'도 몇몇 브라우저에서 일관성없는 처리를하고 있으며,'body'는 이전 버전의 Opera에서'margin' 대신'padding'을 사용했습니다. – bobince