How can I remove space (margin) around an HTML header?

Question

There is always some space above my header. How can I remove it?

My HTML and CSS code is given below.

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

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

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

score 72 · Accepted Answer · answered Jan 20 '13 at 11:04

72

Try:

h1 {
    margin-top: 0;
}

You're seeing the effects of margin collapsing.

answered Jan 20 '13 at 11:04

robertc

74,533
18
193
177

benbai123 · Answer 2 · 2015-05-03T01:47:23.093

13

Try margin-top:

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

Edit:

Now I found relative position probably a better choice:

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

edited May 03 '15 at 01:47

answered Jan 20 '13 at 11:08

benbai123

1,423
1
11
11

score 9 · Answer 3 · answered Jan 20 '13 at 11:10

9

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.

answered Jan 20 '13 at 11:10

Панайот Толев

6,597
5
19
28

2

Be carefull with the use of the * selector. It is very bad for performance. I think you should consider working with a reset css like the one from Eric Meyer http://meyerweb.com/eric/tools/css/reset/ – Pevara Jan 20 '13 at 11:20

score 5 · Answer 4 · answered Sep 22 '15 at 13:58

5

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

answered Sep 22 '15 at 13:58

Patrick van Efferen

396
3
5

score 5 · Answer 5 · answered Oct 10 '15 at 10:17

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>

score 4 · Answer 6 · answered Jan 20 '13 at 17:40

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.

score 2 · Answer 7 · answered Jan 20 '13 at 17:33

2

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/

answered Jan 20 '13 at 17:33

Rudolf

1,856
2
19
32

you mean margin: 0px; – Xiler Dec 17 '14 at 13:26
1

Linters even highlight your version: https://github.com/CSSLint/csslint/wiki/Disallow-units-for-zero-values – Rudolf Dec 19 '14 at 09:24

user3139574 · Answer 8 · 2017-05-03T16:27:23.923

1

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

edited May 03 '17 at 16:27

answered May 03 '17 at 16:00

user3139574

1,119
10
6

score 0 · Answer 9 · answered Jun 05 '23 at 16:01

0

In the HTML, to cut top margin (as an example):

<h2 style="margin:0.3em 0">

answered Jun 05 '23 at 16:01

Mark Tsizis

266
1
5
8

Matheusva1001 · Answer 10 · 2023-06-05T16:08:52.990

0

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

h1{
  margin: 0px 0px 0px 0px;
}

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

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

edited Jun 05 '23 at 16:08

answered Jun 05 '23 at 16:05

Matheusva1001

1
2

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – DSDmark Jun 07 '23 at 10:47

How can I remove space (margin) around an HTML header?

10 Answers10

Linked

Related