概要
文書をレイアウトする際に、
それぞれの要素を標準的な
CSSボックスモデルに基づいた
長方形のボックスとして
それぞれのボックスは コンテンツ領域, パディング領域, ボーダー領域, マージン領域 と定義されています。
コンテンツ領域の説明
コンテンツ境界に囲まれた領域で、文字列や画像，動画プレイヤー等の実際のコンテンツを含みます。
box-sizing: content-box; (既定値) の場合、要素に指定した幅，高さはこのコンテンツ領域の幅，高さです。
コンテンツ : 内容, 中身
- <div style=" width:3em; height:2em; box-sizing: content-box; outline:1px solid; padding:0.5em; border: 0.5em solid transparent; background-clip: content-box; background-color: #ccffff; "></div>
width:3em; で幅を３文字分としていますが余白と境界も上下左右に各0.5文字分を指定しているので、左の輪郭線と右の輪郭線の幅は5文字分となりました。
高さも同様の計算となります。
box-sizing: content-box; を指定した場合(既定値なので省略時を含む)の、幅，高さの指定がどこを示すかの例示です。
outline を指定して、要素の輪郭線を視覚化しています。
padding:0.5em; border:0.5em solid transparent; と指定して他の指定値を意図的に存在させる事により、幅，高さが何を表しているかを実感したいと例示しました。
background-clip: content-box で背景をコンテンツボックス領域中に表示する指定をして、background-color で背景を指定しています。
- <div class=
"cdvSample202"> <div></div> <div></div> <div></div> </div>
- .cdvSample202
> div { width:4em; height: 4em; box-sizing: border-box; outline: 1px solid; padding: 1em; background-image: url('./risyu.svg'); background-size: 100%; } - .cdvSample202
> div:first-child { background-clip:padding-box; } - .cdvSample202
> div:nth-child(2) { background-clip:content-box; } - .cdvSample202
> div:nth-child(3) { background-clip:content-box; background-origin: content-box; }
background-clip: content-box; を指定した場合の、背景の見え方の例示です。
コンテンツと余白の切り分けに注意が必要かと思います
overflow では余白を含めて要素の溢れを処理し
box-sizing で幅，高さの指定がどこを示すかが指定できるし
background-clip で背景をどこまで含むか指定できるし
background-origin で背景画像の原点が指定できます。
パディング領域の説明
パディング境界に囲まれた領域で、コンテンツ領域に要素の余白を含めて拡張したものです。
background-clip: が content-box だと背景が要素の余白を含みませんが、padding-box, border-box(既定値) の時は要素の余白を含みます。
パディング : 詰め物, 水増し, 埋草
- <div style=" padding:1em; width:3em; height:2em; box-sizing:content-box; outline:1px solid; border: 1em solid transparent; background-clip: padding-box; background-color: #ccffff; ">
- <div style=" width:100%; height:100%; box-sizing:content-box; background:#ffffff; "></div>
- </div>
background-clip: padding-box; を指定してパディング領域に背景を指定して、コンテンツ領域には子要素を幅，高さ100%で埋めて親の余白を視覚化してみた例示です。
background-clip: padding-box; を指定した場合の背景の範囲を示す例示です。合わせて幅，高さともに100%とした子要素を用意してコンテンツ領域を区切る仕掛けも用いています。
outline を指定して、要素の輪郭線を視覚化しています。
border:1em solid transparent; と指定して他の指定値を意図的に存在させる事により、幅，高さが何を表しているかを実感したいと例示しました。
background-clip: padding-box で背景をパディングの外側の辺まで拡張して境界の下には背景が描かれない指定をして、background-color で背景を指定しています。
コンテンツ領域の視覚化として、子要素に背景を指定して表しています。
インライン要素でもパディングは効果がありボーダーの位置を決めます。
ただ行間ではなくボーダーとの位置なので、インラインコンテキストの整形とかを考えて左右（前後）に疑似要素とか使う場合の調整用とかに限る方が良いと思われます。
paddingプロパティには auto はありません。親要素を元に計算値とするか整形用のブロック要素を用意する必要があります。
ボーダー領域の説明
ボーダー境界に囲まれた領域で、パディング領域に要素の境界線を含めて拡張したものです。
background-clip: が border-box (既定値) だと背景が境界線を含みますが、それ以外の時は境界線を含みません。
box-sizing: border-box; の場合、要素に指定した幅，高さはこのボーダー領域の幅，高さです。
ボーダー : 境界
- <div style=" border: 1em solid #ccffff; width:5em; height:4em; box-sizing:border-box; outline:1px solid; padding:1em; "></div>
width:5em; で幅を５文字分としています。余白と境界も上下左右に各１文字分を指定していますが、左の輪郭線と右の輪郭線の幅は７文字分となりコンテンツ領域の幅は５文字分となりました。
高さも同様の計算となります。
box-sizing: border-box; を指定した場合の、幅，高さの指定がどこを示すかの例示です。
outline を指定して、要素の輪郭線を視覚化しています。
padding:1em; と指定して他の指定値を意図的に存在させる事により、幅，高さが何を表しているかを実感したいと例示しました。
border: #ccffff で境界の色を指定する事で境界線を視覚化しています。
box-sizing の既定値である content-box は、width, height の指定をコンテンツ領域の幅，高さの指定とします。
content-box が既定値であるが故に、つい余白や境界の幅，高さを忘れがちになり、包括コンテナから溢れる事があります。
マージン領域の説明
簡単に言うと隣接するブロックとの距離をとる為の領域です。余白と言うか隙間というか。
ただマージンには相殺があるので、領域としてとらえるのにも注意が必要です。
マージン : 余裕, 余白, 欄外
- <div style=" outline:1px dotted; width:5em; color: #000000; background-color: #ccffff; ">
- <div style=" background-color: #ffffff; ">隣接要素</div>
- <div style=" margin:1em; width:auto; height:2em; box-sizing:border-box; outline:1px solid; background-color: #ffffff; "></div>
- <div style=" background-color: #ffffff; ">隣接要素</div>
- </div>
包括している上位の要素に width:5em; で幅を５文字分として例示しています。マージンを上下左右に各１文字分を指定しているので、自身の要素の左の輪郭線と右の輪郭線の幅は３文字分となりました。
上マージンは１文字分で、先のテキストと１文字分の上下の間が空いています。下も同等です。
outline を指定して、要素の輪郭線を視覚化しています。自要素は実線で親要素は点線です。
自要素を width:auto; と指定する事で右マージンも視覚化しています。
自要素の前後にテキストがあるのはマージンの相殺の回避の為です。（親要素を outline でなく border で視覚化という手段もありますが…
幅や左マージンと左右の余白(padding)などが指定されている場合(autoを除く)、右マージンの指定は無視されて auto として計算される場合があります。
マージンには相殺される場合があります。親と先頭，末尾の子要素の相殺や、隣接する兄弟要素の相殺や、空要素の相殺などです。
マージン側の相殺とかと違いますが、float の機能というか clear プロパティの機能からして、clear で指定してもその要素の上マージンは無視されるので。