Webで画面レイアウトをいじくろうとしたときに、margin、border、padding がどこの部分だっけ？と忘れてしまうのでボックスモデルと呼ばれるものを書いてみた。
CSSでは内容（Content）に対して幅と高さの指定ができて、余白部分がpadding、border、marginとなるんだなと。ただこのボックスモデルはブロックレベル要素には効くのだがインライン要素には効かないときがあるらしい（後述）。
[広告]
ブロックレベル要素とは要素の前後に改行が入って要素同士が縦に並ぶもの。インライン要素とは要素の前後に改行が入らず要素同士が横に並んでいくもの。HTMLタグでいうと以下です。
ブロックレベル要素
・div
・h1〜h6
・p
・ul, ol, li
・table
・form
など
インライン要素
・a
・span
・img
・label
など
先ほどインライン要素ではボックスモデルの指定が効かないときがあると書きましたが、具体的に言うと「marginは左右は効くが上下は効かない」、「paddingは他の要素の領域を考慮しないので重なるときがある」らしいです。なので、インライン要素でmargin、paddingを使うときは注意が必要そうです。
[広告]
初歩的なんですけれども、、、画像を中央にしたくって、CSSをいじくったときの話。
div（ブロックレベル要素）の中にあるimg（画像）を中央にするにはCSSを以下のようにすればうまくいきました。
■HTMLの内容
<div class=”abc”>
<img ・・>
</div>
■CSSの内容
.abc { text-align: center;
margin-left: auto;
margin-right: auto}
margin-leftとmargin-rightをautoにしておけば画像が中央にいくとばかり思っていたのですが、それだけではdivのブロック領域が中央にいくだけで画像は真ん中より少し左によってしまいます。画像自体も真ん中にするにはtext-alignを使う必要がありました。text-alignは文字列に使うものだと思っていましたが画像にも使えるみたいです。もう少し言うと、text-alignはインライン要素に使えるようです（ブロックレベル要素には使えない）。