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?

developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing

Vitorino fernandes
– Vitorino fernandes

2015-05-13 07:30:37 +00:00
Commented May 13, 2015 at 7:30 — Vitorino fernandes
– Vitorino fernandes, Commented May 13, 2015 at 7:30

isherwood · Accepted Answer · 2023-03-10 14:14:46Z

93

I would say that using this global reset is a bad way of solving this.

* {
  margin: 0;
  padding: 0;
}

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.

edited Mar 10, 2023 at 14:14

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered May 13, 2015 at 7:45

andeersg

1,6252 gold badges15 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user4311599 Over a year ago

What kind of side effects? The only thing I know is that it might be better for the performance to reset like this: body, div, p, a, img, h1, h2....{padding:0; margin:0;}

andeersg Over a year ago

You have to do more work to reapply margins and/or padding to the elements you want it on (You get full control, but you have to do more work). Of course, all of this is preferences by the person coding, but for me i like "normalize.css" better than "reset.css".

p3nchan Over a year ago

Yup. I've heard of this before. Maybe trying to use normalize is more targeted for resetting margin/padding. Thanks!

PapillonUK Over a year ago

Thanks andeersg for the tip to add padding to the body to prevent any margins overlapping it. That one tip has solved so many layout issues I've experienced that it deserves a web page and shrine dedicated to it!

DJ_Icebear · Accepted Answer · 2015-05-13 08:09:56Z

14

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.

answered May 13, 2015 at 8:09

DJ_Icebear

2422 silver badges9 bronze badges

Comments

Mystical · Accepted Answer · 2019-01-29 00:35:44Z

13

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.

edited Jan 29, 2019 at 0:35

Mystical

2,8622 gold badges26 silver badges47 bronze badges

answered May 13, 2015 at 7:35

Spawn

3361 silver badge8 bronze badges

1 Comment

isherwood Over a year ago

This is a heavy-handed and problematic approach. It requires subsequent re-styling of paragraphs, lists, etc. It's simply not necessary.

DannyTheDev · Accepted Answer · 2015-05-13 07:29:39Z

6

You've still got a margin on your h1 tag

So you need to remove that like this:

h1 {
 margin-top:0;
}

answered May 13, 2015 at 7:29

DannyTheDev

4,1732 gold badges24 silver badges36 bronze badges

Comments

Rahul Tripathi · Accepted Answer · 2015-05-13 07:30:18Z

6

The issue is with the h1 header margin. You need to try this:

h1 {
 margin-top:0;
}

answered May 13, 2015 at 7:30

Rahul Tripathi

173k33 gold badges292 silver badges341 bronze badges

Comments

Mladen Oršolić · Accepted Answer · 2015-05-13 07:34:18Z

5

This should help you get rid of body margins and default top margin of <h1> tag

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

h1 {
        margin-top: 0px;
    }

answered May 13, 2015 at 7:34

Mladen Oršolić

1,4323 gold badges24 silver badges44 bronze badges

Comments

RïshïKêsh Kümar · Accepted Answer · 2017-07-04 21:18:47Z

3

Just Remove The Browser Default Margin and Padding Apply Top Of Your Css.

<style>

* {
  margin: 0;
  padding: 0;
}

</style>

NOTE:

Try to Reset all the html elements before writing your css.

OR [ Use This In Your Case ]

<style>

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

h1 {
        margin-top: 0px;
    }

</style>

DEMO:

<style>

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

h1 {
        margin-top: 0px;
    }

</style>

<html>
 <head>
 </head>
 <body>
  <h1>logo</h1>
 </body>
</html>

answered Jul 4, 2017 at 21:18

RïshïKêsh Kümar

5,0621 gold badge27 silver badges38 bronze badges

Comments

Vinayak · Accepted Answer · 2015-05-13 07:37:25Z

1

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

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

answered May 13, 2015 at 7:37

Vinayak

4233 silver badges22 bronze badges

Comments

Darian · Accepted Answer · 2015-05-13 07:37:54Z

1

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.

answered May 13, 2015 at 7:37

Darian

3481 silver badge8 bronze badges

Comments

wardheed · Accepted Answer · 2015-11-02 12:31:27Z

0

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.

answered Nov 2, 2015 at 12:31

wardheed

914 bronze badges

Collectives™ on Stack Overflow

Removing body margin in CSS

10 Answers 10

4 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

4 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related