Why "html, body" and not just "body" to delete page margins?

I noticed that using both html, body elements in the CSS declaration is only necessary when using some styles. In the case of margin , html becomes unnecessary because only the body element has the default margin .

Generally, html, body is used for other styles when the style you want to apply to body also depends on html style.

A classic example is the height style. By default, both html and body have no predefined height. The height of both will depend on the content of the page, that is, the height of both will be until the end of the last page element.

So, if I set height to only body , it will have no effect because the height of html has not been set. The height of the child-element is based on the height of the parent-element . If the html , which is parent of the body , has no height, then the body is without reference.

So, setting the height in both:

html, body{
   height: 100%;
}

The body will have the height of the html , which will be the same as the viewport (viewable window area).

In short, if you just want to remove the page margins, use only body .

The reason for this is because browsers use different default style sheets.

For example, Chrome can use a margins pattern for the HTML document:

/* É apenas um exemplo */
html {
    margin: 10px;
    padding: 10px;
}

Firefox :

/* É apenas um exemplo */
html {
    margin: 20px;
    padding: 20px;
}

And IE :

/* É apenas um exemplo */
html {
    margin: 0px;
    padding: 0px;
}

If you do not reset the default style, you will probably have a problem. This is why it is recommended to reset the entire default style.

Of course nowadays I believe (I'm not saying impossible) that there is a browser that uses margin or padding default in the HTML document .

As stated by colleagues, each Browser has its default style sheet (usre-agent css). Here you can read about it What is User Agent StyleSheets?

Another point that you can check for this is crossbrowser , where each rendering engine has its own particularities and you need to use Vendor Prefix for the classes to work in each different browser, you can read about it here Do you need to add prefixes in some CSS properties?

It is even due to this CSS difference of the user-agents that there exist "methodologies" such as u CSS.Normalize (tries to leave all browsers with the same visual aspect) and CSS Reset (remove default values of all class) , you can read about it here: CSS Reset or Normalize?

CSS.Normalize project: link (creator words)

NOTE: Note that this option uses different floats for HTML and Body

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}
body {
  margin: 0;
}

CSS Reset: link (there are several others)

OBS: Notice that this guy "zeroes" values for almost everything rss

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

And here is a list of CSS Default values suggested by W3C: link

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { 
    display: block; unicode-bidi: embed 
}

Here is a list of CSS default values for most elements link

Only a reference image about the <h1> tag in Chrome and FF Quantum. Note that even without putting a CSS the Browser itself has its default style sheet. And this can vary from Browser to Browser as stated above ...

Perhaps in older browsers, there was this need to identify the entire html hierarchy, I always declare only body and I never had a problem. I think this is the same as seeing some texts written by older people using "eh" instead of "is".