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

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

図にしてみますと、


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

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

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

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

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

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


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


関連記事

  1. はじめに – 初めてWeb入門とは

  2. 代替テキストを表示する

  3. 最後に、ウェブサイトを公開する

  4. リンクを装飾する

  5. 設定をしよう

  6. テストアップロードをしよう

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

ランダムピックアップ