<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>

回答

相關問題