CODEWITHSUNDEEP
htmlcss
Miha Šušteršič
Miha Šušteršič

Reputation: 10042

<html> element bigger than <body>

I am building a simple react app. Here is my index.html after rendering:

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

The only ruling I have in my main.css file so far:

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

What happens in that my body tag has some white space before it starts. There seems to be no margins or paddings on my html and body tags, but instead of starting at the top of the page, the body just starts a couple of pixels lower...

So the <html> is 400x516px, while the <body> is 400x500px. I would like the body to fill the html element completely.

If you need more information please ask or checkout the git repo. Running npm run start opens the server at 8080.

Thanks for the help.

Upvotes: 1

Views: 6529

Answers (4)

Pravin Vavadiya
Pravin Vavadiya

Reputation: 3207

try to something like this.

p,body{margin:0}

Upvotes: 0

saravanabawa
saravanabawa

Reputation: 1767

Browsers automatically add some margin before and after each <p> element.The margins can be modified with CSS.

So set,

p{
margin:0;
}

Upvotes: 0

Alexander Taran
Alexander Taran

Reputation: 6725

There are default styles in every browser. So if you do not use a reset css - the body and paragraphs and lot's of other elements have margins and paddings etc. so body,p {margin:0} is your friend

Upvotes: 0

phobia82
phobia82

Reputation: 1257

Your problem is that the p tag gets a margin automatically from the browser, just set p{margin:0} and you will be ok.

Or remove the <p> from the navbar, since I guess the html there will be something else at the end.

Upvotes: 3

Related Questions