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

Question

When you want to delete the default page margins I always see the following CSS code:

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

Why use html, body just using body which is the body page already solves?

Example:

body{
   margin: 0;
   padding: 0;
}

<div>
  Nenhuma margem ou espaçamento
</div>

Is there any technical reason to include the html in the code?

Answer 1

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

Example, the Chrome may use a margins for the document HTML:

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

The Firefox:

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

And the IE:

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

If you do not reset the default style, you will probably have some problem. So it is recommended to reset all the default style.

Of course nowadays I believe (I don’t say impossible) there is some browser that uses margin or padding standard in the document HTML.

Answer 2

As stated by colleagues each Browser has its own style sheet standard (usre-agent css). Here you can read about this What is User Agent Stylesheets?

Another point you can check is in the question crossbrowser, where each rendering engine has its particularities and it is necessary to use the "Vendor Prefix" for the classes to work in each different browser, you can read about it here Prefixes need to be added to some CSS properties?

It is even due to this difference in CSS of user-agents that there are "methodologies" like u CSS.Normalize (tries to make all browsers look the same) and the CSS Reset (removes default values of all classes), you can read about it here: CSS Reset or Normalize?

CSS Project.Normalize: http://nicolasgallagher.com/about-normalize-css/ (words of the creator)

OBS: Note that this option uses different volares for HTML and Body

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

CSS Reset: https://cssreset.com/scripts/eric-meyer-reset-css/ (there are several others)

OBS: Notice that this guy "Zera" 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 the Default CSS values suggested by W3C: https://www.w3.org/TR/CSS2/sample.html

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 the default CSS values for most elements https://www.w3schools.com/cssref/css_default_values.asp

---

Just a reference image on the tag <h1> In Chrome and FF Quantum. Note that even without a CSS, the Browser itself has its default stylesheet. And this can vary from Browser to Browser as stated above...

Answer 3

I realized that the use of both elements html, body in the CSS statement is only necessary when using some styles. In the case of margin, the html becomes unnecessary because only the element body owns the standard margin.

Is usually used html, body for other styles when the style you want to apply to body also depends on the style of html.

A classic example is the style height. By default, both the html as to the body do not have 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 element of the page.

So if I set height only in the body, will have no effect because the time of the html has not been set. The height of the child element is based on the timing of the parent element. If the html, that is father of body, does not have height, therefore the body is left without reference.

Therefore, setting the height in both:

html, body{
   height: 100%;
}

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

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