CODEWITHSUNDEEP
htmlcssmarginspace
p3nchan
p3nchan

Reputation: 1544

Removing body margin in CSS

I'm new to web development, and met a problem when removing margin of body.

There's space between the very top and "logo" 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?

Upvotes: 65

Views: 274416

Answers (10)

andeersg
andeersg

Reputation: 1615

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.

Upvotes: 92

Spawn
Spawn

Reputation: 336

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.

Upvotes: 13

RïshïKêsh Kümar
RïshïKêsh Kümar

Reputation: 5092

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>

Upvotes: 3

wardheed
wardheed

Reputation: 91

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.

Upvotes: 0

DJ_Icebear
DJ_Icebear

Reputation: 232

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.

Upvotes: 13

Darian
Darian

Reputation: 348

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.

Upvotes: 1

Vinayak
Vinayak

Reputation: 425

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

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

Upvotes: 1

Mladen Oršolić
Mladen Oršolić

Reputation: 1422

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

Upvotes: 5

Rahul Tripathi
Rahul Tripathi

Reputation: 172588

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

h1 {
 margin-top:0;
}

Upvotes: 6

DannyTheDev
DannyTheDev

Reputation: 4173

You've still got a margin on your h1 tag

So you need to remove that like this:

h1 {
 margin-top:0;
}

Upvotes: 6

Related Questions