無数にあるCSS/スタイルシートのプロパティを大まかに分類し、分類したプロパティを1つずつ紹介していく本連載。第3回の今回は、ボックス(borderプロパティ)周りの見えない余白部分を制御するマージンとパディングのプロパティを10個紹介します。
ボックスの周りの目に見えない部分のプロパティなので地味な感じがしますが、このマージンとパディングを理解することで、CSSのレイアウト力がグッと上がりますよ!
本企画で対象とするバージョンは現在多く使われている、CSS 2.1とします。CSS/スタイルシートの基本的な使い方に関しては、下記連載をご参照ください。
いまさら聞けないCSS/スタイルシート入門
Webデザインにあると便利なCSS。ちょっとサイトをステキにするためのスタイルシートです。基本の基本を学びませんか?
「デザインハック」コーナー
また本企画では、プロパティの参照方法のコードを、標準JavaScriptによるDOMでの参照方法に加え、jQueryのセレクタを使った参照方法も掲載してます。jQueryと、そのセレクタについては、下記記事をご参照ください。
jQuery、プラグイン、jQuery UI、Web経由のCDNとは
CSSの書き方も分かるjQueryプラグイン実践活用法(1) 基本/おさらいとしてプラグインやjQuery UIについて簡単に触れ、Web経由でjQueryを使うCDNについて解説
デザインハック < リッチクライアント
2009年12月8日
marginプロパティは、ボックスモデルの一番"外側"にある余白領域(マージン)の幅を表します。上下左右のマージンを一括で指定できます。
margin-top、margin-bottom、margin-left、margin-rightといったプロパティのショートハンドプロパティとして使用されます。
詳しくはコチラ→ margin 外側にある余白領域の幅を表すmarginプロパティ
ボックスの上側のマージンの値を設定するプロパティです。
詳しくはコチラ→ margin-top 上側のマージンの値を設定するmargin-topプロパティ
ボックスの下側のマージンの値を設定するプロパティです。
詳しくはコチラ→ margin-bottom 下側のマージンの値を設定するmargin-bottomプロパティ
ボックスの左側のマージンの値を設定するプロパティです。
詳しくはコチラ→ margin-left 左側のマージンの値を設定するmargin-leftプロパティ
ボックスの右側のマージンの値を設定するプロパティです。
詳しくはコチラ→ margin-right 右側のマージンの値を設定するmargin-rightプロパティ
paddingプロパティは、ボックスのコンテンツエリア周りの"内側"の余白領域(パディング)の幅を表します。上下左右のマージンを一括で指定できます。
padding-top、padding-bottom、padding-left、padding-rightといったプロパティのショートハンドプロパティとして使用されます。
詳しくはコチラ→ padding 内側にある余白領域の幅を表すpaddingプロパティ
ボックスの上側のパディングの値を設定するプロパティです。
詳しくはコチラ→ padding-top 上側のパディングの値を設定するpadding-topプロパティ
ボックスの下側のパディングの値を設定するプロパティです。
詳しくはコチラ→ padding-bottom 下側のパディングの値を設定するpadding-bottomプロパティ
ボックスの左側のパディングの値を設定するプロパティです。
詳しくはコチラ→ padding-left 左側のパディングの値を設定するpadding-leftプロパティ
ボックスの右側のパディングの値を設定するプロパティです。
詳しくはコチラ→ padding-right 右側のパディングの値を設定するpadding-rightプロパティ
Copyright © ITmedia, Inc. All Rights Reserved.
