2009年07月13日

marginとpadding

こんにちは。島津です。
今回が初記事です。よろしくお願いいたします。

今日は、スタイルシートで余白を設定する際に使用する
『margin』及び『padding』プロパティについてご紹介します。

各プロパティの詳しい情報や応用テクニック、ブラウザ別の挙動などの
深いお話は次回・次々回で触れることにして、今回は初めて(記事の担当が)ですので
まず『margin』と『padding』の超・基本からご説明します。


どちらも、要素の余白を指定するためのプロパティですが、
『margin』が対象要素の外側の余白を設定するのに対し、
『padding』プロパティは対象要素の内側の余白を設定します。

図で表すと、こんな感じになります。

具体的な実装例を見てみましょう。

・marginプロパティ

要素の外側、つまりスタイルを設定する対象の要素と
他の要素との間の余白を設定します。
ここではとりあえず、IMGタグで試してみます。

▼スクリーンショット
   
※スクリーンショットは、windows Firefox3.0のものです。
左はmargin未設定、右はmargin設定をしたスクリーンショットになります。
(htmlコーディング)
<img src="img1.jpg" alt="" /><img src="img2.jpg" alt="" /><img src="img3.jpg" alt="" />
(cssサンプル)
img {

width:35px;
height:35px;
margin-right:5px;

}
各IMGタグの右側に、5pxの余白を開けてみました。
marginプロパティは、インライン要素でもブロック要素でも同じように使えます。
特にこれといってわかりにくいところはないかと思いますが、どうでしょうか?

 次、paddingプロパティです。

・paddingプロパティ

要素の内側の余白を設定します。
タグによっては「内側ってどこ?」となりますが、
ここではとりあえず、DIVタグの中に画像を入れて試してみます。
(グレーの枠線で囲まれた部分がDIVタグです。)

▼スクリーンショット
   
※スクリーンショットは、windows Firefox3.0のものです。
左はpadding未設定、右はpadding設定をしたスクリーンショットになります。
(DIVタグは幅を指定しないと横幅いっぱいに広がるので、右側には最初から余白が空いています。)
(htmlコーディング)
<div class="imgWrap">

<img src="img1.jpg" alt="" />

</div>
(cssサンプル)
.imgWrap {

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

}
paddingプロパティはブロック要素に対して使用します。
インライン要素は基本的に「高さ・幅」の概念はないので
基本的にはpaddingプロパティは使用しません(※)。

※ インライン要素にpaddingを設定するケースもあります。
 詳しくは次回以降にご説明します。

とりあえず、基本中の基本の知識は以上です。

次回、『margin』『padding』各プロパティの応用編に続きます。

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

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

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

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