2009年10月02日

marginとpadding その3

こんにちは。島津です。

前回・前々回と『margin』『padding』プロパティのお話をして来ましたが、
今回は『padding』プロパティについて、ちょっと使えるテクニックをご紹介します。

2番目は、知っておくといろいろ役に立ちそうな技です。
 

背景色をつけた要素でpaddingを使うと…

前々回の基本編ですでにご説明しましたが、
marginが要素の外側に対して余白を設定するのに対し、
paddingは要素の内側に対しての余白を設定します。

「要素の内側」に余白を入れるわけですから、marginの場合とは違って
余白の領域も要素の実体部分に含まれます。

ちょっとわかりにくいかも知れないですが、個人的なイメージでは
  • ・要素=段ボール箱
  • ・内余白=段ボール箱の内側にしきつめた、透明の梱包材
みたいなものかな〜と思ってます。
(さしずめmarginは箱の外につけたつっかえ棒?)


ブラウザの仕様の違いに影響されやすいmarginよりも
paddingの方が使い勝手がいいように思いますが
要素に対して背景色や背景画像を設定している場合は注意が必要です。

▼スクリーンショット

※スクリーンショットはWindows FireFox3.0のものです。
(htmlコーディング)
<div class="outer">
  <p>marginもpaddingもなし</p>
  <p class="text1">左にpadding</p>
  <p class="text2">左にmargin</p>
</div>
(cssサンプル)
* {

margin:0;
padding:0;

}
.outer {

width:150px;
padding:10px;
border:solid 1px #DDDDDD;

}
p {

padding-left:0;
margin-left:0;
background-color:#96C1C5;

}
.text1 {

padding-left:20px;

}
.text2 {

margin-left:20px;

}
 

Pタグだけでアイコン付きテキストを実現

上で説明した特性を応用すれば、こんなことが出来ます。

▼スクリーンショット

※スクリーンショットはWindows FireFox3.0のものです。
(htmlコーディング)
<div class="outer">
  <p>アイコンつきテキスト</p>
</div>
(cssサンプル)
* {

margin:0;
padding:0;

}
.outer {

padding:10px;
border:solid 1px #DDDDDD;

}
p {

color:#666666;
font-size:15px;
padding:0 0 0 20px;
background-position:left top;
background-repeat:no-repeat;
background-image:url(img/icon.gif);

}

paddingで確保した領域に、背景画像としてアイコンを表示しています。
IMGタグでアイコンを配置するより、ソースもすっきりして管理もラクになります。
paddingとbackground-positionを左側ではなく右側にすれば、更新履歴でよく見る
「NEW!」のような表示も可能です。

但し、CSSで設定できる背景は一つだけ(※)ですので、アイコンを複数つけたい場合は
Pタグを多重に囲むか、一番よく使うアイコンだけCSS+それ以外をIMGタグ…
といった使い分けをするか、なんらかの工夫が必要になります。
(※CSS2.0までのお話。CSS3.0からは複数設定できるようになるらしい??)

paddingで稼いだ領域に背景画像を出すテクニックを覚えておくと
何かと応用が効くようになるので、とても便利です。


marginとpaddingの初心者講座は、とりあえずこんなところで
いったんおしまいです。ありがとうございました。

HTML5&CSS3の最新情報はこちら → HTML5GOGO

posted by baba at 19:07 | Comment(0) | TrackBack(0) | 情報
この記事へのコメント

この記事へのトラックバック
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。