title: HTML CSS Box with padding and margin and 100% width?
body: <p>I have a box <code>#box</code> with width: 100%, height: 100%, padding: 5px, margin: 5px; border: 5px;</p>
  
  <p>I need in HTML5 layout correctly display that.</p>
  
  <p>Now i have that:</p>
  
  <p><img src="https://i.stack.imgur.com/gg1nU.png" alt="enter image description here"></p>
  
  <p>But i need fit block in body area.</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
      &lt;style&gt;
      body,html {
          width: 100%;
          height: 100%;
          margin: 0;
      }
  
      #box {
          width: 100%;
          height: 100%;
          border: 5px solid red;
          padding: 15px;
          margin: 20px;
      }
      &lt;/style&gt;
  
      &lt;body&gt;
      &lt;div id="box"&gt;
      Text will be here
      &lt;/div&gt;
      &lt;/body&gt;
  </code></pre>