title: Inline-block vs inline elements in terms of line-breaks
body: <p>Inside of a parent element which is a paragraph, there is text and a couple of anchor links. These anchor links have their display set to <code>inline-block</code> and the visual result looks like this:
  <a href="https://imgur.com/a/aLR3Q" rel="nofollow noreferrer">https://imgur.com/a/aLR3Q</a></p>
  
  <p>Now if I would change the display to inline, the result looks like this: 
  <a href="https://imgur.com/a/TFof9" rel="nofollow noreferrer">https://imgur.com/a/TFof9</a></p>
  
  <p>My question is, why does having the display of the anchors set to <code>inline-block</code> instead of just <code>inline</code> cause this, let's just say "soft line break" ? Because I thought that in terms of line-breaks, both of the displays act in the same way, and don't break at all. </p>
  
  <p>Codepen link for the code: <a href="https://codepen.io/Kestvir/pen/zpvmYV" rel="nofollow noreferrer">https://codepen.io/Kestvir/pen/zpvmYV</a></p>
  
  <p>The code for the parent element: </p>
  
  <pre><code>.footer__copyright {
      border-top: 1px solid #777;
      padding-top: 2rem;
      width: 80%;
      float: right;
  }
  </code></pre>
  
  <p>The code for the anchors: </p>
  
  <pre><code>footer__link:link, .footer__link:visited {
      color: #f7f7f7;
      background-color: #333;
      text-decoration: none;
      text-transform: uppercase;
      display: inline-block;
      transition: all .2s;
  }
  </code></pre>
  
  <p>The anchors are: </p>
  
  <pre><code>&lt;a href="#" class="footer__link"&gt;Jonas Schmedtmann&lt;/a&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;a href="#" class="footer__link"&gt;Advanced CSS and Sass&lt;/a&gt;
  </code></pre>