ブロックレベル要素とインラインレベル要素(1)

ブロックレベル要素

• 見出し(h1～h6タグ)や段落(pタグ)、ul、liタグなどのリスト、ボックスを定義するdivタグなど文章構造の基本となる。
• 包含ブロックいっぱいに拡がるブロックを作る。
  包含ブロックについてはこちら
• その為、続けて書いても横並びにならず縦に並ぶ。

　
ブロックレベル要素は横幅に空きスペースがあってもソースコード記述の順番と同じくA→B→C→Dの順に縦に並ぶ。

レイアウトする上での留意点

• margin 　-　上下左右指定できる。
• padding 　-　上下左右指定できる。
• width 　-　指定できる。
• height 　-　指定できる。
• border 　-　指定できる。
• background 　-　指定できる。

インラインレベル要素

• 文字と同じレベルで扱われる。
• 主にブロックレベル要素の内容として用いられ、<strong><span><a>タグのように特定の部位に何らかの効果を付け加える要素。
• 続けて書いても横に並ぶ。
• インライン要素の中にブロックレベル要素を書いてはいけない。

レイアウトする上での留意点

• margin 　-　左右のみ指定できる。
• padding 　-　上下左右指定できるが上下はあまり効いたように見えない。
• width 　-　指定できない。
• height 　-　指定できない。
• border 　-　指定できる。
• background 　-　指定できる。

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

• テキストでない何かに置き換えられる要素で<img><input><textarea>タグなど。文法上はインライン、レイアウト上からはブロックレベル要素の特徴を持つ。

レイアウトする上での留意点

• margin 　-　上下左右指定できる。
• padding 　-　上下左右指定できる。
• width 　-　指定できる。
• height 　-　指定できる。
• border 　-　指定できる。