Css-tips1
はじめに
わかったつもりで実は分かってなかったHTML５の基礎知識を纏めたメモ。
今回は，結構罠に嵌まる確率が高いmargin・paddingについてまとめてみた。
目次
ボックスモデル
HTML5と言うと，HTMLのバージョンとしてのHTML5(狭い意味)と，Javascriptを初めとしたWeb技術としてのHTML5(広い意味)がある。
今回は前者の意味でHTML5という言葉を用いている。
というのも，HTML5ではセマンティクスの観点からHTMLは文章構造・意味を表すのを担い，デザイン部分はCSS3(以下CSS)が担うという風に，明確に区別が定義されるようになった。(らしい…)
ボックスモデルは文章の構造・意味的な部分よりもデザイン的な部分が大きい為，CSSが担うことになった。
その事を端的に表しているのが「display」プロパティ。
この要素は[ブロック・インライン等の、要素の表示形式を指定する際に使用」される。
つまり，HTML5の殆どのタグが，自由にブロック・インラインどちらかのボックスに変えることが出来る。
http://www.d-toybox.com/spec/CSS3/box/index.html#L706
ただ，ブラウザの仕様上，特に指定がない場合はHTML4時代の名残としてp要素はブロックレベルでa要素はインラインレベルでというように(ブラウザが判断して)表示されるようです。
ボックスモデル配置の大前提
ボックスの構成要素
要素が宣言されると，ブラウザは次の部品を構成する。
- 内容（コンテンツ）
- ボーダー（border）
- 内容とボーダーの間の余白（padding）
- ボーダーと他のボックスとの間の余白（margin）
これは，ブロック・インラインともに共通している。
但し，インライン要素の場合は，width や height，上下の margin は効かない。
これは，インライン要素はあくまでも内容の中の一部に過ぎないから
包含ブロック
1 | <div> |
内容の配置は，親要素のpaddingの内側になる。
上記の例だと，p要素はdiv要素のpaddingの内側になる。
そして、p要素の内容であるhogeは，p要素のpaddingの内側となる。
このpaddingの内側は，「包含プロック(又はコンテナブロック)」とよばれる。
ボックスの配置は，祖先・親要素の内容(コンテンツ)内になる。
必ずしも親要素内とは限らないので注意が必要。
例えば，「position:static」以外を指定すると，親要素と子要素の関係が変化する。(詳しくは別の機会に)
簡単に書くと，親要素に「static」以外が指定されていると，その親要素が基準となりボックスが配置される。
ボックスの配置
ボックスの配置は，ブロックボックスとインラインボックスの2つに分けられる。
ブロックボックスは「個々の独立したかたまり」を意味する。
そして，その塊は下へ下へと配置されていく。
例えエディタ上でp要素が横に並んでいても，ブラウザ上では段落が分けられて表示される。
一方のインラインボックスは「行の一部」として表示される。
例えば，エディタでa要素とa要素の間を改行で区切っても，ブラウザ上では横に並んで表示される。
marginの相殺
marginの相殺は，
- 上下に隣り合ってるボックス同士
- 入れ子関係にあるボックス同士(但し，間にboder,paddingがない場合)
の間で起こる。
相殺が起こった場合，大きい方の数値が採用される。
相殺を回避するには，boder,paddingを設定するか，overflow:hidden を設定する。
また，floatを設定した場合も相殺は起こらない。
