(イ) ブロックの余白を指定する（１）

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

図にしてみますと、

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

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

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

padding: 上 右 下 左;

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

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

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

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

あなたも、サポートメールに参加しませんか？

『初めてWeb入門』に取り組んでくださっている方にサポートメールをお送りしています。
ここでは、『初めてWeb入門』では紹介し切れなかったウェブデザインの知恵を配信しています。
名前とメールアドレスだけで参加出来ますので、興味のある方は、ぜひご参加くださいね＾＾

※サポートメールは、いつでも解除できます。詳しくはサポートメールのページをご確認ください。