ブロックレベル要素とインラインレベル要素のまとめ

ブロックレベル要素とは

• ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素。

• ブロックレベル要素は、ブラウザでの表示でも、一つのブロック（通常、改行を伴う表示上のかたまり）として扱われる。

ブロックレベル要素の中に、別のブロック要素やインラインレベル要素を含むことができるが、
逆にインラインレベル要素の中にブロックレベル要素を置くことはできません。

主なブロックレベル要素

<h1>～<h6>、<p>、<table>、<ul>、<ol>、<dl>、<table>、<div>

インラインレベル要素

• インラインレベル要素は、主にブロックレベル要素の内容として用いられる要素

• 文書の構造を構成するというより、文章の一部としてブロックレベル要素内の特定の部分になんらかの役割や機能を持たせる要素

インラインレベル要素は、その内容に文字データあるいは他のインライン要素を持つことができるが、ブロックレベル要素を含むことはできません。
インラインレベル要素は、ブロックレベル要素に内包されていないといけません。

インラインレベル要素は、「置換要素」（インラインブロック要素）と「非置換インライン要素」の2種類に分かれます。
「置換要素」とは、インライン要素の中で画像やフォーム部品など、テキスト以外のものに置き換わる要素のことを指します。
「置換要素」は一般的なインライン要素とは異なり、横幅と高さを持っています。

主なインラインレベル要素

<a>、<br>、<em>、<strong>、<span>

主な置換要素（インラインブロック要素）

<img>、<input>、<textarea>、<select>、<object>

インラインレベル要素の注意事項

インライン要素にmarginやpaddingを設定すると、意図した見栄えにならないことがあります。
インライン要素にmarginやpaddingを設定したい場合は、対象のインライン要素に「display : block;」を設定してブロックレベル要素として表示させるか、

などブロックレベル要素で囲んで、ブロックレベル要素にmarginやpaddingを設定する方法を使います。

インラインレベル要素にmargin、paddingを設定したときの挙動について

インラインレベル要素にmargin、paddingを設定した場合の挙動は以下の通りです。

• 幅(width)　⇒指定できない（注：インラインブロック要素は指定できる）
• 高さ(height)　⇒指定できない（注：インラインブロック要素は指定できる）
• 左右のマージン(margin)　⇒最初の文字の左側と、最後の文字の右側に指定できる
• 上下のマージン(margin)　⇒指定できない（無視される）
• 左右のパディング(padding)　⇒最初の文字の左側と、最後の文字の右側に指定できる
• 上下のパディング(padding)　⇒指定できるが、前後の行や要素にかぶってしまうため、意図した効果にならないことが多い
• 左右のボーダー(border)　⇒最初の文字の左側と、最後の文字の右側に指定できる
• 上下のボーダー(border)　⇒指定できるが、他の行に重なる場合があり、意図した効果にならないことが多い

この様にインライン要素にmarginやpaddingを設定すると、意図した見栄えにならないことがあるため、注意が必要です。