【WEB制作の基本】ブロック要素とインライン要素の違い

ブログ

更新日：2023年06月04日

HTMLの要素には表示形式に種類があります。

ブロック要素、インライン要素、インライン要素の３種類です。
上記3要素の使い分け方を知らないと、「要素の高さを調節できない」「右揃えや中央揃えができない」など困ります。

この記事では、3つの表示形式の使い分けとその特徴についてを解説していきます！

（１）ブロック要素の特徴
・縦に要素が並ぶ
・幅と高さを指定できる
・余白を自由に調整できる
・要素の配置を指定できない

（２）ブロック要素の種類
divタグ、hタグ、pタグ、articleタグ、sectionタグ、headerタグ、mainタグ、footerタグ　など

（１）インライン要素の特徴
・横に要素が並ぶ
・幅と高さは指定できない
・上下の余白が調整できない
・要素の配置を指定できる

（２）インライン要素の種類
spanタグ、aタグ、imgタグ、inputタグ、selectタグ、labelタグ、brタグ　など

（１）インライン要素の特徴
・横に要素が並ぶ
・幅と高さが指定できる
・余白を自由に調整できる
・要素の配置を指定できる

フェア・デザインではホームページから
動画・グラフィックまで各種制作依頼を
幅広くお受けしております。
まずはお気軽にお問い合わせください。