CSS - 내 HTML과 BODY 사이의 흰색 갭

현재 프로젝트에 HTML5 Boilerplate + Normalize.css를 사용하려고하는데 다음 문제가 발생했습니다.CSS - 내 HTML과 BODY 사이의 흰색 갭

내 HTML 태그와 내 BODY 태그 사이에 간격이있는 것으로 보입니다. 나는 그 원인을 알아 내려고 노력했지만 많은 시도 후에 실패했습니다.

나는 여기 저기에 뭔가를 놓쳤을 것입니다. 사전에 http://jsfiddle.net/C7gbC/

감사 : 여기

<!DOCTYPE html> 
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

<title>Ridanis | Web Design &amp; Web Development</title> 

<meta name="description" content=""> 
<meta name="viewport" content="width=device-width"> 

<link rel="stylesheet" href="css/normalize.min.css"> 
<link rel="stylesheet" href="css/main.css"> 

<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script> 
</head> 
<body> 
<!--[if lt IE 7]> 
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p> 
<![endif]--> 

<!-- Wrapper/Start --> 
<div class="wrapper"> 
<h1>Hello World!</h1> 
</div> 
<!-- Wrapper/End --> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script> 

<script src="js/main.js"></script> 
</body> 
</html>

는 바이올린입니다.

출처

2013-04-19 Khaled

다른 사람이 브라우저를 사용하는 경우 Internet Explorer가 아니기 때문에이 브라우저에 HTML 문이 없을 가능성이 높습니다. 페이지는 어쨌든 작동해야하지만 더 이상 유효한 HTML이 아닙니다. –

기술적 인 배경 : 이것을 "인접 마진"이라고합니다. http://www.w3.org/TR/CSS21/box.html#collapsing-margins – CBroe

@CBroe : 정확히 말하면 현상을 접기 여백이라고합니다. . 인접 마진은 특정 상황에서 접을 수 없습니다. – BoltClock

normalize.css 일관성에 대한 브라우저의 기본값에 따라 h1 요소에 대한 기본 여백 선언을 삽입합니다

h1 { 
    font-size: 2em; 
    margin: 0.67em 0; 
}

당신이 (당신의 주요 스타일 시트에 직접 normalize.css 수정 중) 수동으로 제로로하면, 차이가 사라집니다.

h1 { 
    margin: 0; 
}

출처

2013-04-19 09:12:22 BoltClock

H1을 P 태그로 변경했지만 문제가 여전히 있습니다. – Khaled

@Khaled : 그 이유는 수동으로 여백을 제거하는 것입니다. 나는'h1'을'p'로 바꾸라고 말하지 않았습니다. – BoltClock

여전히 동일하지만 변경된 사항은 없습니다. – Khaled

내 페이지 머리글에 "h2"와 (과) 관련된 문제가 있습니다. iE8과 Crome의 "p"태그와 동일합니다. 그냥 여백을 설정 : 0; 내 "h1"과 "p"태그를 main.css 페이지의 시작 부분에 설정 한 일부 구조 스타일에 적용합니다. 솔루션이 작동하는 것 같습니다

출처

2013-05-16 21:38:30 Kane

CSS - 내 HTML과 BODY 사이의 흰색 갭

답변

관련 문제