<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>是400x516px，而<body>是400x500px。我希望身体完全填充html元素。

如果您需要更多信息，请询问或结帐git repo。运行npm run start在8080处打开服务器。

感谢您的帮助。

来源

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

你的问题是，p标签从浏览器中自动获得一个边距，只需设置p{margin:0}，你就可以了。

或者从导航栏中删除<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>

回答

相关问题