HTMLの超きほん 〜ブロックレベル要素とインライン要素〜 - Qiita

HTMLは要素の積み重ね HTMLは入れ子構造の要素が積み重なって表示されます。 基本的にはHTML文書で先に記述したものほど より上に より左に 表示されます。 でも、下に要素が重ならず、横にくることもあります。 この違いはなんでしょうか？ ブロックレベル要素とインライン要素 要素の種類よって、積み重なり方が違います。 ざっくり説明すると ブロックレベル要素: 改行される要素 横にスペースがあっても下に積み重なる インライン要素: 改行されない要素 スキマがあれば横に並ぶ もう少し詳しく見ていきましょう。 ブロックレベル要素 ブロックレベル要素の特徴 ブロックレベル要素は以下のような特徴があります。 親要素の横幅いっぱいに広がる箱 箱は縦に積み重なる 幅や高さを設定できる 余白を設定できる 主なブロックレベル要素 用途 要素名