<html>보다 큰 요소 <body>

간단한 반응 앱을 구축 중입니다. 다음은 렌더링 후 내 index.html을은 다음과 같습니다<html>보다 큰 요소 <body>

<html><head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Hello react!</title> 
    <link rel="stylesheet" href="./dist/styles/main.css" type="text/css"> 
</head> 
<body> 
<div id="App"><div data-reactroot="" class="navbar"><p>This will be the navbar</p></div></div> 
<script src="./dist/components/main.js"></script> 

<style> 
    body { 
    margin: 0; 
    } 
</style> 
</body></html>

지금까지 내 main.css가 파일에 내가 가진 유일한 판결 :

.navbar{ 
    background-color:blue 
} 
#App{ 
    height:500px; 
    background-color:pink 
}

무엇 내 몸 태그가 전에 약간의 공백을 갖는 것을 발생 시작됩니다. 내 HTML 태그와 body 태그에는 여백이나 패딩이 없어 보이지만 페이지 상단에서 시작하는 대신 몸체가 몇 픽셀 더 아래로 시작됩니다 ...

따라서 <html>은 400x516 픽셀이며 <body>은 400x500px입니다. 시체가 html 요소를 완전히 채우고 싶습니다.

더 자세한 정보가 필요하면 git repo에게 문의하십시오. npm run start을 실행하면 8080에 서버가 열립니다.

도움 주셔서 감사합니다.

출처

2016-12-03 Miha Šušteršič

문제는 p 태그가 브라우저에서 자동으로 여백을 얻고 단지 p{margin:0}으로 설정하면 문제가되지 않는다는 것입니다.

또는 navbar에서 <p>을 제거하십시오. html이 끝날 무언가가있을 것이라고 생각합니다.

출처

2016-12-03 10:48:36 phobia82

모든 브라우저에는 기본 스타일이 있습니다. 당신이 리셋 CSS를 사용하지 않는 그래서 경우 - 몸과 단락과 많은의 다른 요소를 마진과 패딩 등을 그렇게 body,p {margin:0}

출처

2016-12-03 10:49:33

브라우저가 자동으로 전에 각 <p> element.The 후 약간의 마진을 추가하려면 친구입니다 여백은 CSS로 수정할 수 있습니다. 그래서 설정

, 이런 일에

p{ 
margin:0; 
}

출처

2016-12-03 10:52:46 saravanabawa

시도.

p,body{margin:0}

출처

2016-12-03 10:54:03

<html>보다 큰 요소 <body>

답변

관련 문제