CODEWITHSUNDEEP
htmlcss
Nightowl
Nightowl

Reputation: 11

how can i get rid of space above the header

How can I get rid of the space between the top of the webpage and the header?
This is my code:

body {
    margin: 0px;
    padding: 0px;
}
        
#Header {
    background-image: url(space.jpg);
    color: white;
    font-size: 40px;
    text-align: center;
    height: 70px;
    margin-top: 0px;
}
<div id="Header">
  <p> Weird Title </p>
</div>

<a href ="practice.html"> Click here </a>

I tried margin-top but that doesn't work is there something I am doing wrong.

Upvotes: 1

Views: 86

Answers (4)

Axel
Axel

Reputation: 3323

The <p>-element has a default margin-top across all major browsers which is 1em.

You have to reset this default margin to achieve the desired result.

#Header > p, /* NEW LINE */
body {
    margin: 0px;
    padding: 0px;
}

#Header {
    /*background-image: url(space.jpg); make thing visible for snippet*/
    background: #999; /*make thing visible for snippet*/
    color: white;
    font-size: 40px;
    text-align: center;
    height: 70px;
    margin-top: 0px;
}
<div id="Header">
  <p> TITLE </p>
</div>

<a href ="practice.html"> Click here </a>

NOTE: A lot of CSS properties have default values. To get rid of this in general you can either do a reset or normalize your CSS.

Upvotes: 1

JSON C11
JSON C11

Reputation: 11792

You can reset the margin and padding of all elements in the DOM by using the * CSS selector as shown in the code snippet below. Also, you only need to specify units in CSS when using non-zero values.

* {
    margin: 0;
    padding: 0;
}
        
#Header {
    background-image: url(space.jpg);
    background-color: black;
    color: white;
    font-size: 40px;
    text-align: center;
    height: 70px;
}
<div id="Header">
  <p> Weird Title </p>
</div>

<a href ="practice.html"> Click here </a>

Please note that although this is a quick and easy solution, it can provide unnecessary overhead for larger sites, as the browsers rendering agent has to update each element in the document.

Upvotes: 1

Brian Heffernan
Brian Heffernan

Reputation: 9

You should set the margin-top property to 0 to the correct the spacing.

Upvotes: 0

Sergio Diez
Sergio Diez

Reputation: 409

You have to apply the margin-top: 0 rule to the p element inside the #Header div, as the margin is being created by the p element instead of the div.

As a tip, you can check these kinds of issues using the developer tools on your browser, selecting an element and checking the border / margin / padding values on the right pane.

#Header > p {
    margin-top: 0
}

Upvotes: 2

Related Questions