How can I remove space margin above HTML header

Question

I am creating a website   I have written the HTML part and now I am writing the stylesheet  But there is always some space above my header  How can I remove it   My HTML and CSS code is given below    x000D   x000D  body  x000D    margin  0px  x000D    padding  0px  x000D    x000D   x000D  header  x000D    margin  0px  x000D    padding  0px  x000D    height  20em  x000D    background-color   C0C0C0  x000D    x000D   lt header gt  x000D     lt h1 gt OQ Online Judge lt  h1 gt  x000D     lt form action   lt  php echo base url     gt  index php base si  method  post  gt  x000D       lt label for  email1  gt E-mail    lt  label gt  lt input type  text  name  email  id  email1  gt  x000D       lt label for  password1  gt Password    lt  label gt  lt input type  password  name  password  id  password1  gt  x000D       lt input type  submit  name  submit  value  Login  gt  x000D     lt  form gt  x000D   lt  header gt  x000D   x000D   x000D

User · Answer

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

User · Answer

Just for completeness  changing overflow to auto hidden should do the trick too    x000D   x000D  body   x000D    margin  0px  x000D    padding  0px  x000D    x000D   x000D  header   x000D    margin  0px  x000D    padding  0px  x000D    height  20em  x000D    background-color   C0C0C0  x000D    overflow  auto  x000D    x000D   lt header gt  x000D     lt h1 gt OQ Online Judge lt  h1 gt  x000D   x000D     lt form action   lt  php echo base url     gt  index php base si  method  post  gt  x000D       lt label for  email1  gt E-mail   lt  label gt  x000D       lt input type  text  name  email  id  email1  gt  x000D       lt label for  password1  gt Password   lt  label gt  x000D       lt input type  password  name  password  id  password1  gt  x000D       lt input type  submit  name  submit  value  Login  gt  x000D     lt  form gt  x000D   lt  header gt  x000D   x000D   x000D

User · Answer

Try margin-top    lt header style  margin-top  -20px   gt            Edit   Now I found relative position probably a better choice    lt header style  position  relative  top  -20px   gt

User · Answer

Try   h1       margin-top  0      You re seeing the effects of margin collapsing

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

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

Examples related to css

Examples related to html

Examples related to margin

Examples related to html-heading