How can I remove space (margin) above HTML header?

问题

I am creating a website.

I have written the html part and now I am writing the stylesheet. But there is always some space about my header. I can\'t remove it.

My HTML and CSS code is given below.

<header>
 <h1>OQ Online Judge</h1>
 <form action=\"<?php echo base_url();?>/index.php/base/si\" method=\"post\">
  <label for=\"email1\">E-mail : </label><input type=\"text\" name=\"email\" id=\"email1\">
  <label for=\"password1\">Password : </label><input type=\"password\" name=\"password\" id=\"password1\">
  <input type=\"submit\" name=\"submit\" value=\"Login\">
 </form>
</header>

This is my html code.

body{
margin: 0px;
padding: 0px;
}
header{
margin: 0px;
padding: 0px;
height: 20em;
background-color: #C0C0C0;
}

This is my css code.

回答1:

Try:

h1 {
    margin-top: 0;
}

You're seeing the effects of margin collapsing.

回答2:

Try margin-top:

<header style="margin-top: -20px;">
    ...

Edit:

Now I found relative position probably a better choice:

<header style="position: relative; top: -20px;">
    ...

回答3:

It is good practice when you start creating website to reset all the margins and paddings. So I recommend on start just to simple do:

* { margin: 0, padding: 0 }

This will make margins and paddings of all elements to be 0, and then you can style them as you wish, because each browser has a different default margin and padding of the elements.

回答4:

I solved the space issue by adding a border and removing is by setting a negative margin. Do not know what the underlying problem is though.

header {
  border-top: 1px solid gold !important;
  margin-top: -1px !important;
}

回答5:

To prevent unexpected margins and other browser-specific behavior in the future, I'd recommend to include reset.css in your stylesheets.

Be aware that you'll have to set the h[1..6] font size and weight to make headings look like headings again after that, and many other things.

回答6:

Just for completeness, changing overflow to auto/hidden should do the trick too.

body {
  margin: 0px;
  padding: 0px;
}

header {
  margin: 0px;
  padding: 0px;
  height: 20em;
  background-color: #C0C0C0;
  overflow: auto;
}

<header>
  <h1>OQ Online Judge</h1>

  <form action="<?php echo base_url();?>/index.php/base/si" method="post">
    <label for="email1">E-mail :</label>
    <input type="text" name="email" id="email1">
    <label for="password1">Password :</label>
    <input type="password" name="password" id="password1">
    <input type="submit" name="submit" value="Login">
  </form>
</header>

回答7:

It is probably the h1 tag causing the problem. Applying margin: 0; should fix the problem.

But you should use a CSS reset for every new project to eliminate browser consistencies and problems like yours. Probably the most famous one is Eric Meyer's: http://meyerweb.com/eric/tools/css/reset/

回答8:

This css allowed chrome and firefox to render all other elements on my page normally and remove the margin above my h1 tag. Also, as a page is resized em can work better than px.

h1 {
  margin-top: -.3em;
  margin-bottom: 0em;
}

来源：https://stackoverflow.com/questions/14423781/how-can-i-remove-space-margin-above-html-header

标签

css

html5

margin

html-heading