ボックスの一番外側にある透明な余白部分で，特に設定していないならばマージンの幅は0 である
マージンとパディングの間の枠部分である
コンテンツとボーダーの間の領域であり，背景設定の影響を受ける
テキストや画像などのコンテンツを表示する領域で，背景設定の影響を受ける
ボックスを生成した後，改行するような段落を表す要素
例 ) h1, p, div
ソース文書のうち新たに内容ブロックを形成しない要素
例 ) strong, em
ドキュメントツリーの頂点に位置する要素
ボックス要素への設定をしていない状態
HTML の要素中に直接記述する場合
<p style = "margin-left: 3em;
border-left: 20px;
padding-left: 3em;
width: auto;
padding-right: 10%;
border-right: 0.1em;
margin-right: 2em;">
水平プロパティの例
</p>
CSS による記述方法
// CSS 内
.showbox1 {
margin-left:3em;
margin-right:2em;
border-left:1em;
border-right:0.1em;
padding-left:3em;
padding-right:5em;
width:auto;
}
// HTML 内
<p class="showbox1">
水平プロパティの例</p>
水平プロパティの例
HTML の要素中に直接記述する場合
<p style="margin-top: -10%;
margin-bottom: 3em;
border-top: 20px;
border-bottom: 0.1em;
padding-top: 3em;
padding-bottom: -1em;
height: auto;>
垂直プロパティの例
</p>
CSS による記述方法
// CSS 内
.showbox2 {
margin-top:-20%;
margin-bottom:3em;
border-top:20px;
border-bottom:0.1em;
padding-top:3em;
padding-bottom:-1em;
height:auto;
}
// HTML 内
<p class="showbox2">
垂直プロパティの例</p>
垂直プロパティの例
margin-top="2em"
上から順番に表示されるはずなのだが，フローティングした要素はその順番から除外される
外辺が包含要素の内辺をはみ出すのであれば，右側の要素を更に下に移動させる
HTML上の例 1.
1例えばこのp要素中にフローティングした画像要素を配置するとする．
2
するとこのように画像はテキストの中に浮遊して現れる．さらに包含要素であるp要素の内辺をはみ出さないように調整しながら位置を変えていく.
3
しかし例外として，負のマージンをフローティング要素に与えた場合は包含要素からはみ出すことがある．
HTML上の例 2.
つまり，HTML は上から書いた順に表示されるはずだが，まるでその要素がないかのように，その順番から除外される．
1
2
しかしフローティングは他の要素の上に浮遊することでレイアウトに影響を及ぼす．なお，フローティング要素の周囲のマージンは相殺されない．
位置指定とは，要素ボックスの表示場所を他コンテンツへの相対で厳密に定義することである
ノーマルフローによる通常の位置との相対で位置を指定する
ノーマルフローから削除され，その包含ブロックに対して配置される
絶対配置の一種で，その包含ブロック自体がビューポートとなる
要素同士が重なってしまったときの前後関係をz-index 属性で指定する
相対配置をした画像は位置指定しなかったとき本来表示される位置と相対的に表示される．
たとえばここ
に相対配置で画像を左に20%, 上から5em で配置するとこのようになる．
絶対配置は包含ブロックの左上を絶対座標の ( 0, 0 ) と考えて，右下が正の方向として座標として考える．
ここ
に絶対配置で上と同じ条件で画像を配置しても，配置した位置は関係しない．