How can I remove space between body and top of page

Question

I have been working with CSS and HTML to create basically a banner and navbar. I've been trying to get it to stick to the very top, but after I saw it in chrome, I noticed both the body tag and the HTML tag are detatched. I've tried removing all the margins and padding from every single part that could be responsible for the space, but I couldn't get rid of it. What is a good way to do this?

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="style/normalize.css" />
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <div class="wrapper">
        <header>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="demo.html">Demo</a></li>
                </ul>
            </nav>
        </header>
    </div>
</body>
</html>

CSS code:

html {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
}

.wrapper {
    margin: 0;
    padding: 0;
}

header {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

 nav
{
  text-align: left;
}

nav ul
{
  list-style: none;
  /*margin: 0 10; corrected*/
  margin: 0;
  padding: 0;
}

nav li
{
  display: inline-block;
}

nav a
{
  font-weight: 800;
  padding: 15px 10px;
  font-size: 1em;
}

Screenshot (as requested):

Screenshot

can we have a screenshot of the problem highlighted as the question is not that clear — Mudassir
– Mudassir, Commented Oct 19, 2014 at 9:00
use reset css cssreset.com which will not allow elements to take default styles given by browsers — Vitorino fernandes
– Vitorino fernandes, Commented Oct 19, 2014 at 9:00
@emmanuel Thanks! That fixed it. It seems that is was because it said margin: 0 10; w/o the units (10px). Would you happen to know why? — rdelfin
– rdelfin, Commented Oct 19, 2014 at 9:04
margin: 0 10; is invalid CSS; measurements must have units. since the 10 is invalid and there's no such thing as a "partially" valid property, the whole line is ignored. — Eevee
– Eevee, Commented Oct 19, 2014 at 9:10

Pedro Santana · Accepted Answer · 2019-03-23 10:56:38Z

6

I tried every solution here and nothing really worked, mainly because I don't have navigation in my simple page or a header.

What worked for me was using the universal selector like this:

*, html, body {
   margin: 0;
   padding: 0;
}

4 years later, hope it helps someone.

answered Mar 23, 2019 at 10:56

Pedro Santana

631 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Frank · Accepted Answer · 2016-12-08 18:34:50Z

1

2 years later - I just solved a similar problem - I had extra spaces. Try removing the blank spades before your first (it's indented with spaces or a tab in the code)

answered Dec 8, 2016 at 18:34

Frank

10810 bronze badges

Comments

gbalduzzi · Accepted Answer · 2017-09-14 14:18:11Z

1

I had a similar problem just now and i resolved with

header {
    position: absolute;
    top: 0;
    right: 0;
}

answered Sep 14, 2017 at 14:18

gbalduzzi

10.3k3 gold badges36 silver badges65 bronze badges

Comments

Achintha Isuru · Accepted Answer · 2019-05-08 20:13:32Z

1

You can use this code snippet

body{
    margin: 0%;   
}

for more information please refer to the given website:

https://www.w3schools.com/css/css_boxmodel.asp

answered May 8, 2019 at 20:13

Achintha Isuru

3,44324 silver badges30 bronze badges

Comments

shah · Accepted Answer · 2014-10-19 09:34:52Z

0

You can remove the space using below code

nav ul {
list-style: outside none none;
padding: 0px;
margin-top: 0px;
}

answered Oct 19, 2014 at 9:34

shah

1,1692 gold badges20 silver badges42 bronze badges

1 Comment

rdelfin Over a year ago

Thanks, but the space is still there. It's at the top of the body element, but the body element is not at the top of the html element.

Collectives™ on Stack Overflow

How can I remove space between body and top of page

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related