CSS display:inlineとdisplay:inline blockの違い

🗒 似ているように見えるが似ていない2つの属性を見てみましょう.

📌 整理する

display:inlineとdisplay:inline-blockは機能面では同じですが、機能適用範囲では違います!

ファンクションポイントタグをinlineタグに変更する

同じ条件での属性値を設定し、比較します.

<!-- html -->
<span>Dummy</span>
  <div class="box1">
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
  </div>
<span>Dummy</span>

/* CSS */
.box1 { 
      background-color: #f00;
      width: 300px;
      height: 200px;
      margin: 100px;
      padding: 20px;
    }

📌 1) display: inline

width、heightsを適用しない

マージンは左右のみ、

paddingはいずれも

である

📌 2) display: inline-block

幅、高さ、マージン、充填は

に適用されます.
したがって、条件の厳しいinlineプロパティを使用するよりも、inlin-blockプロパティを使用します.

📚 Reference

:公費支援課