CSSではボックスレイアウトを採用
これは
各要素をボックス単位でレイアウトするもの
ボックスには様々な種類があり
ブロック
インライン
インラインブロックなどがある
どのボックスにするかは
displayプロパティで指定
ブロックボックスを指定しないと
Webブラウザーの標準設定になる
ｐならブロック
imgはインラインブロック
paddingは余白設定
borderは
コンテンツを囲む境界線の定義
境界線の有無
大きさ、色を指定できる
marginは境界線の外側の余白設定
複数のボックスをレイアウトするとき
ボックス間の間隔を取るのに利用
paddingとmarginは間隔の設定だけど
背景に対しての動きが違う
背景色、背景画像を設定するとき
paddingたと表示される
marginだと表示されない
どちらを使えばいいか悩んだら
border:1px solid;
として
境界線を表示するとわかりやすい
ちなみに solidは線を引く