Tagi. <html> and <body>: What should be the visual style of the entire page?</body></html>
-
In some examples, I've seen the current
<html>Figuresmargin♪paddingand others, and they always started embezzlement.<body>♪ The question is: from a visual point of view (sighs)color♪background-color♪padding♪marginetc.) between<body>and<html>, or what is the current of these two tags that can be attributed to styles, and what is it worth?
-
In fact, either one of them is more comfortable.
But there are a few features.
rem
Unit of measurement
rem- it's the size of the print.html(or:rootbut notbody:html { font-size: 100px; } section { font-size: 20px; } /* drop inheritance */ div { font-size: 1rem; } /* 100px */<section><div>123</div></section>body { font-size: 100px; } section { font-size: 20px; } /* drop inheritance */ div { font-size: 1rem; } /* default */<section><div>123</div></section>Fon
If the lamp is given only
bodyit's covered.html♪ But if both, it'll be different. DefaultbodyI don't wear the whole screen, add the boundaries.body { background: silver; border: 4px solid red; }Just some texthtml { background: white; /* not taken from body now */ }body {
background: silver;
border: 4px solid red;
}Just some textDerogations
Default
bodyDerogations:html {
margin: 0; /* doesn't work */
}body {
border: 4px solid red;
}Just some textbody {
border: 4px solid red;
margin: 0; /* reset here, not on html */
}Just some textWell, one more quint.
Elements
headYou don't have to be invisible.( document.head.querySelector('title')
|| document.head.appendChild(document.createElement('title'))
).textContent = "Just a title";head, title {
display: block;
}Page content goes here...
