ブロックの余白を指定する

今、ブロックの縦幅を指定した影響で、「初めてWeb入門」の文字がかけてしまっています。
これを、ブロックの中に余白を作ることで解消したいと思います。

図にしてみますと、


といった具合です。
このように、ブロックの内側に余白をつくるためには、paddingを使います。
では、みてみましょう。

#header {
	padding: 50px 0 0 50px;
	height: 300px;
}

このpadding:の後の4つの値は、

padding: 上 右 下 左;
の順に余白の大きさを指定します。上から時計回りと覚えると楽チンです。

だから、上と左にそれぞれ50pxの余白ができるのです。
※右と下は0となっていますが、これは0pxの略です。書いても問題ありません。

こんな感じに表示されていればOKです。


もう文字が欠けたりしていませんね。


関連記事

  1. リンクを装飾する

  2. タイトルをつける

  3. 背景画像を設定する

  4. ページ全体を装飾する

  5. 答え合わせ

  6. コストを最大まで抑えられる

お手本ナビの無料HPデザイン

ランダムピックアップ