Webデザイン:オンラインリファレンス

ボックス関連プロパティの共通事項

上下左右の場所を個別に指定する

border,margin,paddingプロパティでは,ボックスの周囲を一括して指定することができるほか,ボックスの上・下・左・右を個別に指定できる.上下左右のキーワードは,ボックスとはの図中にあるように,それぞれtop, bottom, left, rightである.
このキーワードを使用して,border-top, margin-bottom, padding-left などのプロパティを使用することができる.
なお,これらの値については,「0px」という値も指定可能であり,marginについては「負の値」も指定可能である.

上下左右の数値を指定する方法

4通りの方法で指定することができるが,一般には以下の2つが利用される.例えばborderの線の太さを指定する場合,
  • border-width : 3px ; →上下左右すべて3px
    038-1.png
  • border-width : 3px 2px 5px 7px ; →上が3px,右が2px,下が5px,左が7px(時計回りで覚えるとよい)
    038-2.png
となる.
また,参考として残りの2通りの方法も記載しておく.
  • border-width : 3px 2px ; →上と下が3px,左と右が2px
    038-3.png
  • border-width : 3px 2px 5px ; →上が3px,左と右が2px,下が5px
    038-4.png
↑インデックスに戻る←前の項目(037. ボックスでスペースを確保する)→次の項目(039. marginプロパティ)