きまぐれAWA's Life

アクセスカウンタ

zoom RSS CSS(スタイル編) 第11回 余白を指定する♪ 『マージンとパディング』

<<   作成日時 : 2008/03/04 13:21   >>

ブログ気持玉 0 / トラックバック 1 / コメント 0

今回は余白についてです。

余白は画像やフォントなどを配置するため使います。
余白を設定するために使うのが【 margin (マージン)】と【 padding (パディング)】です。
どちらも余白を指定するために使いますが、効果が少し違います。

下の図はトップページの『新着記事』見出し部分です。
『新着記事』本体部分右側に余白を作るために下の文字列をそれぞれ追加してみました。

  margin-right: 20px;
  padding-right: 20px;




青いラインがブログ本体部分と背景の境界です。
図のようにマージンとパディングでは余白のでき方が違います。





 マージン 〜 外側の余白♪ 

下の文章はタグで書いたものですが、イメージとしてはこんな感じです。

こちらはマージンの設定はしていません。【margin:0px;】

AWA's Life へようこそ♪

このブログはパンヤでの出来事や思ってる事を思いつくまま書いちゃおーって思って始めた mairis の日記です♪

マージンを指定しない場合、上下の文章やページの両端との間には隙間はありません。


次は文章の周囲に余白(マージン)を指定してみます。
マージンを上下左右に 50px ずつ設けました。【margin:50px;】

AWA's Life へようこそ♪

このブログはパンヤでの出来事や思ってる事を思いつくまま書いちゃおーって思って始めた mairis の日記です♪

マージンを指定するとボーダーの外側、上下の文章やページの両端から余白が出来ます。

マージンの位置指定は、数値を1〜4個指定することで下のように解釈されます。

【 指定数1個 】  margin: 1px;        (上右下左にそれぞれ1px )
【 指定数2個 】  margin: 1px 2px;      (上下1px 左右2px)
【 指定数3個 】  margin: 1px 2px 3px;    (上1px 左右1px 下3px)
【 指定数4個 】  margin: 1px 2px 3px 4px;  (上1px 右2px 下3px 左4px)

※ 4個指定した場合、位置指定の順序は上から時計回りになっています。
         1px
  4px 要素 2px
         3px


上下左右それぞれ単独指定もできます。
【 上のみ指定 / 上に1px 】  margin-top: 1px;
【 下のみ指定 / 下に3px 】  margin-bottom: 3px;
【 右のみ指定 / 右に2px 】  margin-right: 2px;
【 左のみ指定 / 左に4px 】  margin-left: 4px;





 パディング 〜 内側の余白♪ 

マージンとよく似ていますが、パディングのイメージはこんな感じです。

こちらはパディングの設定はしていません。【padding: 0pt;】

AWA's Life へようこそ♪

このブログはパンヤでの出来事や思ってる事を思いつくまま書いちゃおーって思って始めた mairis の日記です♪

マージンの時と同様に上下の文章やページの両端との間には隙間が無い状態です。


では、パディングの指定をします。
パディングを上下左右に 50pxずつ設けました。【padding:50pt;】

AWA's Life へようこそ♪

このブログはパンヤでの出来事や思ってる事を思いつくまま書いちゃおーって思って始めた mairis の日記です♪

パディングを指定するとボーダーの内側、文章からのボーダーまでの間の部分に余白が出来ます。


パディングの位置指定もマージンと同じで、数値を1〜4個指定することで下のように解釈されます。

【 指定数1個 】  padding: 1px;        (上右下左にそれぞれ1px )
【 指定数2個 】  padding: 1px 2px;      (上下1px 左右2px)
【 指定数3個 】  padding: 1px 2px 3px;    (上1px 左右1px 下3px)
【 指定数4個 】  padding: 1px 2px 3px 4px;  (上1px 右2px 下3px 左4px)

※ 4個指定した場合、位置指定の順序は上から時計回りになっています。

       1px
  4px 要素 2px
         3px



マージンと同様に、上下左右それぞれ単独指定もできます。
【 上のみ指定 / 上に1px 】  padding-top: 1px;
【 下のみ指定 / 下に3px 】  padding-bottom: 3px;
【 右のみ指定 / 右に2px 】  padding-right: 2px;
【 左のみ指定 / 左に4px 】  padding-left: 4px;



マージンはボーダーの外側の余白、パディングはボーダーの内側の余白です。
どちらも余白を作りますが、各ポイントでうまく使い分けることでブログのバランスをとります。



それでは、今回はこのくらいで(わら)


|ω・)ノシ See you♪

|彡 サッ




■ ブログをいじっちゃおぅ♪ 〜 ブログのレシピ 〜 ■


テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(1件)

タイトル (本文) ブログ名/日時
ブログスタイル変更・・・・・失敗?。。゛(ノ><)ノ ヒィ
ブログ内にいくつか訂正したい所があったれきです ...続きを見る
れきの歩み
2010/06/20 17:58

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
URL(任意)
本 文
  現在の閲覧者数:

* ぱにゃステ *

『ぱにゃステ』 customized by mairis
 
 
ふぉろーみー

CSS(スタイル編) 第11回 余白を指定する♪ 『マージンとパディング』 きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる