title: There is approximately 20 pixels of blank space over the first div of my. How can I remove it without ruining the layout of the page?
body: <p>I wrote the following HTML and CSS code. I attached an image of the page from Firefox's inspect tool with the <code>div#top</code> element highlighted. As you can see there is a blank space over the top div that I cannot seem to remove unless I break something else.</p>
  <p><a href="https://i.stack.imgur.com/otE37.png" rel="nofollow noreferrer">The blank space above the top div:</a></p>
  <p>The html file:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;title&gt;title&lt;/title&gt;
      &lt;style&gt;
          * {
              box-sizing: border-box;
          }
          body{
              margin: 0px;
          }
          #top {
              border-style: solid;
              border-width: thin;
          }
  
          #menu {
              border-style: solid;
              border-width: thin;
              float: left;
              width: calc(max(20%, 150px));
              
          }
  
          #content {
              border-style: solid;
              border-width: thin;
              /* float: right; */
              display: inline-block;
              width: calc(max(350px, 100% - max(20%, 150px)));
          }
  
      &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;  
      &lt;div id="top"&gt;
          This is the top div.
      &lt;/div&gt;
      &lt;div id="menu"&gt;
          &lt;ul&gt;
          This div is for the menu.
      &lt;/div&gt;
      &lt;div id="content"&gt;
          And this one is for the content of the site.
      &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Thank you for your help.</p>