How to get rid of whitespace above div in body

Question

I have this weird whitespace above the section-one div in the body.

Here it is:

Don't understand why, I've even reset the CSS to default i.e * { margin: 0;}

Html

<!DOCTYPE html>
<html>
<head>
    <title>Responsive Navigation Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
    <script src="js/jquery-3.0.0.min.js"></script>

</head>

<body>
    <div id='section-one'>
        <div id='headline'>
            <h1> This is the headline </h1>
                <div class='silver-line-break'>
                </div>
                <div id='fee-estimate-box'>
                    <form id='fee-estimate-form' action="#">
                            <legend>Delivery Fee Calculator</legend>
                            <span>First name: </span> <input type="text" name="firstname" value="Mickey">
                            <span>Last name: </span> <input type="text" name="lastname" value="Mouse">
                            <input type="submit" value="Submit">
                    </form>
                </div>
                <div class='silver-break-bar'>
                    <img id='red-car' src="img/red-car.png" alt="" height="250" width="300">
                </div>
        </div>
    </div>
</body>
</html>

CSS

/* Basic Styles */
* {
   margin-top:  0px;
   padding: 0;
}
body {
    padding: 0px;
    margin: 0px;
    background-color: pink;
}

#section-one {
    background-color:  #80be05;
    margin: 0px;
    padding: 0px;
}

Any ideas why there is space between above the section-one div in the body?

Update: I've added the complete code that asked. Not sure what the problem is? Is the something to do with my chrome browser?

Try giving the body a margin-top of 0px, and possibly make it !important. — itamar, Jul 14 '16 at 14:52
Seems to be running fine (https://jsfiddle.net/pdefhkgm/ for reference) on my end. Do you have a live version for me to check out? May be a client-side problem rather than your code being incorrect. — James Gould, Jul 14 '16 at 14:52
Try to set margin zero to heading #section-one h1 { margin: 0; } — Sayed Rafeeq, Jul 14 '16 at 14:56
I also can't reproduce your issue. Make sure your code you've included here is *complete*. https://jsfiddle.net/jvv69fdb/ — TylerH, Jul 14 '16 at 14:56
Okay, this is weird. @SayedRafeeq I set #section-one h1 {margin: 0px;} and it just worked. Don't understand the h1 tag margin made the whole div push down? — Code2016, Jul 14 '16 at 15:03
Guys margin-top of 0px to body didn't do the trick. It was the h1 tag! — Code2016, Jul 14 '16 at 15:04
@ Code2016, h1 to h6 are a block level elements. Block elements appear on the screen as if they have a line break before and after them. For example the
,
,
,
,
,
,
elements are all block level elements. They all start on their own new line, and anything that follows them appears on its own new line. — Sayed Rafeeq, Jul 14 '16 at 15:07
Two site notes. 1) The `*` selector is extremely inefficient. I would advise against using this selector if at all possible. 2) You can leave off the units (in this case `px`) when the numeric value is `0`. — War10ck, Jul 14 '16 at 15:08
@SayedRafeeq I see, essentially all block elements have an extra margin in other words on top and bottom. — Code2016, Jul 14 '16 at 15:10

score 1 · Accepted Answer · answered Jul 14 '16 at 14:52

1

the H1 has a margin of some pixels.

h1 {
  margin: 0px
}

answered Jul 14 '16 at 14:52

Kootsj

431
3
12

No it doesn't. The OP's code already sets the H1's margin to 0. – Mr Lister Jul 14 '16 at 14:59
I actually didn't. I set the section-one div to margin 0. Turns out it was the h1 tag – Code2016 Jul 14 '16 at 15:07
@Code2016 Then why did you say you had `* {margin:0}` in the code? How were we to know that wasn't so? – Mr Lister Jul 14 '16 at 17:02

How to get rid of whitespace above div in body

,

,

,

,

,

elements are all block level elements. They all start on their own new line, and anything that follows them appears on its own new line.

1 Answers1