☰

CSS 表示: インライン vs インラインブロック [重複] 質問する

tag-icon • tag-icon css
CSS 表示: インライン vs インラインブロック [重複] 質問する

CSS では、は およびdisplayの値を持つことができます。との違いを詳しく説明できる人はいますか?inlineinline-blockinlineinline-block

あらゆる場所で検索しましたが、最も詳しい説明では、inline-blockは として配置されますinlineが、 のように動作しますblock。しかし、「ブロックとして動作する」とは具体的に何を意味するのか説明されていません。これは特別な機能ですか?

例を挙げていただくとさらに良い回答になります。ありがとうございます。

ベストアンサー1

インライン要素:

  1. 左右の余白とパディングを尊重しますが、上下の余白とパディングは尊重しません
  2. 幅と高さを設定できません
  3. 他の要素をその左右に配置できるようにします。
  4. これに関する非常に重要な補足事項を参照してくださいここ。

ブロック要素:

  1. それらすべてを尊重する
  2. ブロック要素の後に強制的に改行する
  3. 幅が定義されていない場合は全角になります

インラインブロック要素:

  1. 他の要素を左右に配置できるようにする
  2. 上下の余白とパディングを尊重する
  3. 高さと幅を尊重する

からW3スクール:

  • インライン要素の前後には改行がなく、隣に HTML 要素があっても問題ありません。

  • ブロック要素の上下には空白があり、その隣に HTML 要素を置くことはできません。

  • インライン ブロック要素は、インライン要素として (隣接するコンテンツと同じ行に) 配置されますが、ブロック要素として動作します。

これを視覚化すると次のようになります。

CSS ブロック vs インライン vs インラインブロック

画像はこのページでは、この主題についてさらに詳しく説明しています。

おすすめ記事