Removing body margin in CSS

Question

I m new to web development  and met a problem when removing margin of body     There s space between the very top of the browser and  logo  text  And my code is here on jsbin   Is body   margin  0   wrong if I d like to remove the space

User · Accepted Answer

I would say that using         margin  0    padding  0      is a bad way of solving this   The reason for the h1 margin popping out of the parent is that the parent does not have a padding   If you add a padding to the parent element of the h1  the margin will be inside the parent   Resetting all paddings and margins to 0 can cause a lot of side effects  Then it s better to remove margin-top for this specific headline

User · Answer

You ve still got a margin on your h1 tag  So you need to remove that like this   h1    margin-top 0

User · Answer

The issue is with the h1 header margin  You need to try this   h1    margin-top 0

User · Answer

You can use body or   to make margin and padding 0px      margin  0px  padding 0px

User · Answer

Some HTML elements have predefined margins  namely  body  h1 to h6  p  fieldset  form  ul  ol  dl  dir  menu  blockquote and dd    In your case it s the h1 causing your problem  It has   margin   67em   by default  If you set it to 0 it will remove the space   To solve problems like these generally  I recommend using your browser s dev tools  For most browsers  right-click on the element you want to know more about and select  Inspect Element   In the  Styles  tab  at the very bottom  you have a CSS box-model  This is a great tool for visualising borders  padding and margins and what elements are the root of your styling headaches

User · Answer

I would recommend you to reset all the HTML elements before writing your css with             margin  0      padding  0       After that  you can write your custom css  without any problems

User · Answer

This should help you get rid of body margins and default top margin of  lt h1 gt  tag  body          margin  0px          padding  0px         h1           margin-top  0px

User · Answer

Just Remove The Browser Default Margin and Padding Apply Top Of Your Css      lt style gt         margin  0    padding  0      lt  style gt       NOTE     Try to Reset all the html elements before writing your css    OR   Use This In Your Case     lt style gt                margin  0px          padding  0px         h1           margin-top  0px          lt  style gt      DEMO    x000D   x000D   lt style gt  x000D   x000D       x000D          margin  0px  x000D          padding  0px  x000D        x000D   x000D  h1   x000D          margin-top  0px  x000D        x000D   x000D   lt  style gt  x000D   lt html gt  x000D    lt head gt  x000D    lt  head gt  x000D    lt body gt  x000D     lt h1 gt logo lt  h1 gt  x000D    lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

The right answer for this question is  css reset            margin  0      padding  0      It removes all default margin and padding for every object on the page  no holds barred  regardless of browser

User · Answer

I found this problem continued even when setting the BODY MARGIN to zero   However it turns out there is an easy fix  All you need to do is give your HEADER tag a 1px border  aswell as setting the BODY MARGIN to zero  as shown below   body   margin 0px     header   border 1px black solid      You may also need to change the MARGIN to zero for any H1  H2  etc  elements you have within your HEADER div  This will get rid of any extra space which may show around the text   Not sure why this works  but I use Chrome browser  Obviously you can also change the colour of the border to match your header colour

[html] Removing body margin in CSS

Examples related to html

Examples related to css

Examples related to margin

Examples related to space