ブロック要素とインライン要素の違いは何ですか？

Question

Accepted Answer

すべての要素には、レイアウト内でどのように流れるかを制御するデフォルトの**display**動作があります。 - **Block**要素は**新しい行**で始まり、**利用可能な幅全体**を取ります。幅/高さとすべてのマージン/パディングを受け入れます。例：`

`、`

`、`
`、`
`。 - Inline要素は行内で流れ、コンテンツの幅のみで、幅/高さと上下のマージンを無視します。例：``、``、``、``。 ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## 実践的な落とし穴 ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` インライン要素に`width`/`height`を設定しても何も起こりません。修正はそのdisplayを変更することです： ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — 両方の良さを兼ね備えた `inline-block`はテキストフロー内に収まり（横並び）なおかつ*幅/高さ/マージンを尊重します。ナビゲーションアイテム、バッジ、または行に配置されたボタンに最適です。 ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## なぜ重要なのかデフォルトのdisplayを理解することで、``が高さを受け入れない理由、`
`がなぜスタックするのか、そして`inline-block`、`flex`、または`grid`に切り替えるべき時が説明されます。これは、任意のレイアウトシステムを適用する前に、要素がどのように配置されるかの基礎です。