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

2968 ワード
html CSS テキストリンク
🗒 似ているように見えるが似ていない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


    :公費支援課
    rogramers:ディスクコントローラ-C+/priority queue演算子オーバーライド
    let、const、varの違いと違い