title: Why does inline-block automatically adjust its width according to it's child's width?
body: <p>Please correct me if this question has already been stated on stackoverflow! I apologize dearly if it has but I've been looking for a while and have only found <em>hows</em> not <em>whys</em>.</p>
  
  <p>My question is this: Parent divs seem to automatically take up the full width of the page unless <code>{ display: inline-block; }</code>is specified for it. When it is specified, it then adjusts it's width according to the width of it's child element. This really comes in handy, but I feel that it's important for me to know <em>why</em> this is happening. Here is some code for visual representation. Thanks in advance!</p>
  
  <p>Edit: I see that some people have marked my question as a duplicate, but please show me where in the other question it explains why display inline-block automatically adjusts to it's children's height and width. Thank you!</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>#wrapper {
    border: 1px solid black;
    display: inline-block;
  }
  #child_div {
    height: 100px;
    width: 100px;
    border: 1px solid black;
    margin: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
    &lt;div id="child_div"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>