title: Div moves with all text -Css
body: <p>I have the following question.
  Why is my div moving down?</p>
  <p>I understand that it can be fixed with:</p>
  <pre><code>vertical-align: top;
  </code></pre>
  <p>but why does the div and all the text move?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div{
  
      width: 200px;
      height: 200px;
      display: inline-block;
      border: 1px solid black;
      
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  
      &lt;div&gt;
          &lt;p&gt;Inventore delectus fugit ut. Ipsam adipisci est consectetur velit ab. Magni recusandae molestias, dolorum asperiores dignissimos nemo. ipsum dolor sit amet consectetur adipisicing elit. Nihil commodi sint ab iae! Temporibuslit.
          Nihil commodi sint a&lt;/p&gt;
           
  
      &lt;/div&gt;
  
  
      &lt;div&gt;
          &lt;p&gt;Lorempsa quas qub ipsa quas quae! Temporibus athtrhliquid hic assumenda deserunlit. Nihil commodi sint&lt;/p&gt;
          
          
      &lt;/div&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/E9wjw.png" rel="nofollow noreferrer">enter image description here</a></p>