インラインブロックと改行に関するインライン要素の比較

Question

段落である親要素の内部には、テキストと2つのアンカーリンクがあります。これらのアンカーリンクはその表示がinline-blockに設定しており、視覚的な結果は次のようになります。 https://imgur.com/a/aLR3Q

今私がインラインに表示を変更するかどう、結果は次のようになります。 https://imgur.com/a/TFof9

私の質問は、なぜ、ありますinlineの代わりにアンカーの表示をinline-blockに設定しているのですが、単に「ソフト・ライン・ブレイク」と言いましょうか？私は改行の点で、両方のディスプレイが同じように動作し、まったく壊れないと思ったからです。コードの

Codepenリンク：親要素のhttps://codepen.io/Kestvir/pen/zpvmYV

コード：

.footer__copyright { 
    border-top: 1px solid #777; 
    padding-top: 2rem; 
    width: 80%; 
    float: right; 
} 

アンカー用コード：

footer__link:link, .footer__link:visited { 
    color: #f7f7f7; 
    background-color: #333; 
    text-decoration: none; 
    text-transform: uppercase; 
    display: inline-block; 
    transition: all .2s; 
} 

アンカーは、次のとおり

<a href="#" class="footer__link">Jonas Schmedtmann</a> 

インラインブロックは通常、インライン要素のような複数の行に分割することができないため

と

<a href="#" class="footer__link">Advanced CSS and Sass</a> 

Answer 1

改行が起こります。これは、単にインラインで表示される1つのブロック単位全体です。そのユニット全体が適合しない場合は、すべてが次の行に折り返されます。