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> Figures marginpadding and others, and they always started embezzlement. <body>♪ The question is: from a visual point of view (sighs)colorbackground-colorpaddingmargin etc.) 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 not body:

    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. Default body I don't wear the whole screen, add the boundaries.

    body {
      background: silver;
      border: 4px solid red;
    }
    Just some text

    html {
      background: white; /* not taken from body now */
    }
    

    body {
    background: silver;
    border: 4px solid red;
    }

    Just some text

    Derogations

    Default body Derogations:

    html {
    margin: 0; /* doesn't work */
    }

    body {
    border: 4px solid red;
    }

    Just some text

    body {
    border: 4px solid red;
    margin: 0; /* reset here, not on html */
    }
    Just some text

    Well, one more quint.

    Elements head You 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...


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2