CSS の各プロパティはすべての要素に適用できるとは限りません。そのプロパティを適用できる要素がブロック要素に限られているものやインライン要素に限られているものなど、CSS における (X)HTML の各要素はすべて以下の型(タイプ)に区分することができます。
displayプロパティで "block" の値が指定された要素displayプロパティで "inline" の値が指定された要素displayプロパティで "inline-block" の値が指定された要素要素型(要素タイプ)がブロック要素に分類される要素は、次のような特徴をもっています。
body要素の直接の子要素として、その直下に置くことができる要素である要素型(要素タイプ)がインライン要素に分類される要素は、次のような特徴をもっています。
img要素, input要素, object要素, select要素, textarea要素がある)と非置換インライン要素(置換要素ではない他のインライン要素のこと)に分類される| ブロック要素・インラインブロック要素 | インライン要素 | |
|---|---|---|
| 高さ(height) | 指定可 | 指定不可(置換インライン要素は指定可) |
| 横幅(width) | 指定可 | 指定不可(置換インライン要素は指定可) |
| 左右のマージン(margin) | 要素の左右に存在 | 最初の文字の左側と、最後の文字の右側に存在 |
| 左右のパディング(padding) | 要素の左右に存在 | 最初の文字の左側と、最後の文字の右側に存在 |
| 左右のボーダー(border) | 要素の左右に存在 | 最初の文字の左側と、最後の文字の右側に存在 |
| 上下のマージン(margin) | 要素の上下に存在 | 無視され、レイアウトに影響は無い |
| 上下のパディング(padding) | 要素の上下に存在 | 全ての行に存在し、ボーダーの位置に影響が出る |
| 上下のボーダー(border) | 要素の上下に存在 | 各行に存在するが、他の行に重なる場合がある |
置換要素とはインライン要素の中でも当該要素の属性に入力される値などによって内容が置き換えられ、その寸法(サイズ)で認識される要素のことを指します。具体的には img要素, input要素, object要素, select要素, textarea要素の5つがあります。
非置換インライン要素とは置換要素(img要素, input要素, object要素, select要素, textarea要素)ではないインライン要素のことを指します。
ブロック要素の中でも table要素(display : table ;、または display : inline-table ;)は特定の要素のみを内包でき、表(テーブル)を生成するための要素であることから、それらの要素をまとめて表要素と呼びます。表要素は、表を定義する table要素(display : table ;、または display : inline-table ;)の中でそれぞれ次のように分類されます。
caption要素display : table-caption ;display : table-column ;display : table-column-group ;display : table-row ;display : table-header-group ;display : table-footer-group ;display : table-row-group ;display : table-cell ;なお、border-collapseプロパティによる表示モデルが結合ボーダーモデルと分離ボーダーモデルとで以下の差異があります。
border-collapse : separate ;)のセルの背景領域はボーダー(枠線)の領域まで(内容領域+パディング+ボーダー)ですが、結合ボーダーモデル(border-collapse : collapse ;)のセルの背景領域はパディング領域まで(内容領域+パディング)になります。border-collapse : separate ;)の表のうち、行・行グループ要素と列・列グループ要素は、ボーダー関連プロパティの適用対象となることができません。結合ボーダーモデル(border-collapse : collapse ;)の表では行・行グループ要素と列・列グループ要素も適用対象と成り得ます。ブロック要素の中でも dir要素, dl要素, menu要素, ol要素, ul要素 は特定の要素のみを内包でき、リストを生成するための要素であることから、それらの要素をまとめてリスト要素と呼びます。さらにリストの中の各項目部分を構成する要素をリスト項目要素と呼び、li要素、および displayプロパティで "list-item" の値を指定された要素がリスト項目要素にあたります。
dir要素li要素dl要素menu要素li要素ol要素li要素ul要素li要素(X)HTML文書はすべて樹形図のような構造(木構造)になっており、そこには必ず、すべての内容を包含している html要素が存在します。そして、html要素は最大の親要素であることからルート要素と呼ばれます。さらにルート要素である html要素の第一の子要素が head要素と body要素です。head要素は文書に関する様々な情報を定義するものですが、表示に関わる文書そのものの内容すべては body要素に包含されます。このように html要素と body要素は文書全体の表示に関わることから、CSS においては例外処理の多い特殊な扱いになります。
positionプロパティによって配置("relative | absolute | fixed" のいずれか)を指定された要素のことを位置指定されている要素と呼び、その内の "absolute | fixed" のいずれかを指定された要素のことを絶対位置決め(absolute positioning)の要素と呼びます。これに対して、"relative" を指定された要素を相対位置決め(relative positioning)の要素とも呼びます。