前回はこのようにページコンテンツ全体を線で囲むところまでCSSを書きました。線で囲えたのはいいのですが、線の中の余白が整っていませんね。今回はこれを直していきましょう。marginまずは見出し(h1タグ)の上にできている余白を無くしてみましょう。いうCSSプロパティを使いましたね。使えば、ページの要素(タグで表示されるもの)の外側に付く余白を自由に変更することができます。ページのCSSを編集する前に、前回作ったのページのHTMLソースをもう一度見ておきましょう。私は家野ペイジと言います。このホームページを作りました。<p>これから色々な情報を発信していきたいと考えています。</html>見直してみても、HTMLソース内には、h1タグの上部に余白をつける記述は1つもありません。h1タグの上部に奇妙な空白が発生しているのでしょうか?実は、この余白はブラウザが人間にとって情報を読みやすいように勝手につけてくれているのです。h1タグやh2タグがpタグに比べて大きな文字で表示されるのも、ブラウザが勝手にそうしているのです。CSSを何もつけない場合は見やすくなるのでありがたいのですが、自分でCSSを書いてレイアウトを作りたいときに、この機能が邪魔になってしまうことがあります。いった場合は、このブラウザ標準のスタイルをCSSで上書きする必要があります。次のようにCSSを書き加えてみてください。して」という意味になります。書き加えた後にページを見てみてください。このように余白がなくなったと思います。見出しタグの上下には余白ができる見出しタグ(h1〜h6)には、要素の上下にこのような余白が自動的にできます。見出しタグ周りの見栄えを自分で調節したいときは、marginプロパティに値を設定する必要があります。いうプロパティを使用しました。同様に、要素の下や左右の余白を調整するためには、以下のプロパティを使用します。要素の右の余白を変更また、余白を同時に複数設定する方法もありますが、必要になり次第紹介します。paddingさて、次は左がぴったりくっ付きすぎている問題を修正しましょう。調整できることを紹介しました。使ってbody内のタグ全てに左側余白をつけてもできなくはないですが、全ての要素にプロパティを設定するのは大変です。いう場合は、タグの内側に余白をつけると便利です。bodyタグの内側に余白を設定してみましょう。いうプロパティを使います。paddingを設定すると、このようにページ全体に余白が現れます。設定しなくても、ページ内に余白を設定することができました。同様に、方向別に余白を設定できます。要素内側の右の余白を変更おさらい要素の余白について今回学んだことをおさらいをしましょう。タグの種類によっては、初めからスタイル(余白や文字の大きさなど)がつけられているものがあります。