余白って上下左右、４ヶ所あるはずだけど？

marginプロパティは、上下左右に値をセット出来ます。上だけに設定したい場合は、margin-top:10px;、下はmargin-bottom:10px;といった感じです。
しかし上下左右に4回同じ事を書くのは面倒なので、全て同じ場合は、まとめてmargin:10px;と書くことが出来ます。

これで上下左右ともに10pxの余白を取ります。（0の場合は単位は省略できます。）
※上下10px、左右はバラバラの場合や、上下10px、左右20pxの場合の書き方もあります。詳しくはtagindexで調べてみて下さい！

所でこのmarginとpadding。少し大雑把に「余白関連」という表現をしましたが、どのような違いがあるかご存じでしょうか。
言葉にすると

margin　⇒　指定した要素の外側の余白。背景は表示されない。常に透明。
padding　⇒　指定した要素の内側の余白。背景が表示される。

こうなります。divに代表されるボックスの構造で、非常に重要な違いとなりますので、図で確認してみて下さい。

実際の表示はこちら(margin:20px、padding:20px、border:solid black 5ｐｘ、背景に#d9ecffを指定した場合です。)どこがpaddingになりますか？

ここは文章等が入るスペースになります。この場合は<p>が適当ですね。<p>のボックスはテキストを表示する領域と、パディング(内側余白)、ボーダー(枠線)、マージン(外側余白)で構成されています。

３：基本となるスタイル指定(フォントやボーダー等)

先ほど、ブラウザ間の表示のずれを無くすため、一旦デフォルト値をリセットしましたが、この目的以外にも初期化しておくと良いものがあります。
普段、よく使うプロパティの値があれば、最初に上書きしておけば、後から何回も記述する必要がなくなります。

例えばimgタグのborderプロパティの値は、枠線を出さなければ「0」で固定して問題ありません。（img{ border:0; }）

そこで、今回は、全体で使うフォントの種類とサイズを初期化しておきましょう。
ついでといっては何ですが、先ほど全ての余白をリセットしたので、上下左右の間隔が詰まってしまいます。余白の設定もしておきましょう。

これで、下準備は整いました！お疲れ様でした。CSSはこうなります。

ページ: 1 2

トラックバックURL