title: Inline-block divs behave weird when content is added to them
body: <p>Doubts</p>
  
  <ol>
  <li><p>When content is added to a div, why does it move down, (shown in image)</p></li>
  <li><p>When content is added to all the three divs, they become normal and comes to their top position</p></li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/6P34P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6P34P.png" alt="enter image description here"></a></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{
                background-color:orange;
                height: 200px;
                width: 200px;
                display:inline-block;
              }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
              &lt;head&gt;
                &lt;meta charset="UTF-8" /&gt;
                &lt;title&gt;Document&lt;/title&gt;
              &lt;/head&gt;
              &lt;body&gt;
                &lt;div class="div1"&gt;ankur&lt;/div&gt;
                &lt;div class="div2"&gt;&lt;/div&gt;
                &lt;div class="div1"&gt;&lt;/div&gt;
                &lt;br&gt;
                &lt;button value="prev"&gt;Prev&lt;/button&gt;
                &lt;button value="next"&gt;Next&lt;/button&gt;
              &lt;/body&gt;
              &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>