Html, body

HTML & CSS
1

code1

html, body {
margin:0;
padding:0;
}

(Q1) Are the code1 above and code2 below same (in result)?

code2

body, html {
margin:0;
padding:0;
}

(Q2) If the answer to (Q1) is “yes”, which code is better?
code1 or code2?

2

Hi Joon

I take it you’re styling on a separate style sheet?

To be honest neither are the best as you don’t require the html class in your css styling. You would normally start with the body tag and then move onto your header tags etc.

Are you looking to set all inherited styling to zero so that you start with a blank canvas?

1 Like
3

The code is equivalent.

A comma separated list is just a set of rules separated by a comma.

i.e. the first rules equates to this:

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

It makes logical sense though in the case of the html and body to start with html as the first rule as that is the root element and then work down to the body although there is no difference if you do it in reverse.

2 Likes
4 
html, body  {
margin:0;
padding:0;
}

Since all displays are from inside body tag, I doubt why the code above is needed.
Is the code below not enough?

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

These days its probably enough just to specify margin:0 for the body element only and not the html element.

Indeed you don’t need the padding rule either as browsers seem to have standardised for margin (8px usually) as the default space on the body element.

This wasn’t always the case hence the catch all method previously used before browsers started getting their acts together.

3 Likes
6 
*{margin:0;padding:0}

If I have the code above, I guess that I don’t need the code below at a same page because the code above include the code below.

body  {
margin:0;
padding:0;
}

(Q) Is my guess on the right?

1 Like
7

Correct.

  • represents all elements, including < body >
8

Yes correct as mentioned above but is it a good thing to do :slight_smile:

Do you want to remove all margin and padding from things like form controls as that may change their appearance.

It’s better to use some sort of targeted reset style sheet instead.

5 Likes
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.