上下左右の指定方法

<< 前のページ 余白と境界の仕組み(重要)

padding、margin、borderの概要は前回までに紹介しました。ここではさらに細かい指定方法について紹介します。

padding:30px;

とスタイルシートに記述すると、上下左右の内余白が30pxとなります。
上下左右ではなく、上と下だけに余白を入れたい!という場合は以下のように記述することで可能となります。

padding 30px 0 30px 0;

最初の30pxで上余白、次の0で右余白、3番目の30pxで下余白、最後の0で左余白の設定を行っています。

※重要 【上↑、右→、下↓、左←の順なので、時計回りに設定されると覚えてしまいましょう】

最初の段階では、これだけ覚えてしまえばいいと思います。
また、指定方法は他にもあります。上記のような羅列型が嫌な場合はこちらの方がいいかもしれません。

padding-top:30px;
padding-bottom:30px;
padding-right:0;
padding-left0;

上(top)、下(bottom)、右(right)、左(left)と指定しているので、視覚的にもわかりやすいです。

他にも方法はありますが、混乱を避けるためここでは以上2点だけにとどめておきます。

▲ページトップへ