マージンとパディング Templ8@FC2blog

FC2ブログテンプレートの無料配布とカスタマイズでSEO対策(検索エンジン最適化)

ホーム > スポンサー広告 >マージンとパディングホーム > 基本カスタマイズ >マージンとパディング

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


--/--/-- --:-- スポンサー広告

マージンとパディング

僕がテンプレートをカスタマイズしていていつもよくわからず使っていた語句がありました。その語句とはマージン(margin)とパディング(padding)です。どちらも隙間を作るときに使うのはなんとなくわかっていましたが、その使い分けがよくわからない。なのでこの機会に調べてみました。

それでわかったことはマージンが外側の隙間に対して、パディングは内側の隙間なのだそうです。

  コンテンツ  
青色の矢印がマージンで赤色の矢印がパディング

例えば自分のブログのプラグインのタイトルの部分を見てみたら、背景が黒色で文字が白色になっていて、だけど囲っている四角と文字になくて見栄えが悪い!そんな時はパディングを設定するのです。

例えばプラグインを何個か設定してブログを見てみたら、縦に並んでいるプラグインの間がわずかしかなくて見栄えが悪い!そんな時はマージンを設定するのです。

わかりますか?こんな説明じゃわかんかいかもしれませんね...。
とにかく隙間の調整はマージンかパディングです。内側の隙間と思うならパディングを、外側の隙間と思うならマージンをいじってください。

ここでパディングとマージンの設定の仕方を簡単に説明します。

margin: 1px; または padding: 1px;
↑このように1つしか設定していない場合は上下左右4方向の設定になります。

margin: 1px 2px; または padding: 1px 2px;
↑このように2つ設定してある場合は前の数字が上下2方向、後ろの数字が左右2方向の設定になります。

margin: 1px 2px 3px; または padding: 1px 2px 3px;
↑このように3つ設定してある場合は1つ目が上方向、2つ目が左右2方向、3つ目が下方向の設定になります。

margin: 1px 2px 3px 4px ; または padding: 1px 2px 3px 4px;
↑このように4つ設定してある場合は、前から順に上、右、下、左の設定を意味します。

方向は4方向あるわけですが、左右が同じ大きさの隙間を設定する時や、4方向とも同じ隙間を設定する時には、わざわざ4方向とも指定するのがめんどくさいので、これらの設定の仕方があるのだと思います。

ほかにもこのような設定方法があります。

margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;

上下左右を個別に指定する方法です。topが上、rightが右、bottomが下、leftが左です。これはパディングでも使えます(padding-topみたいな)。

これだけ書いてきましたが、僕もそこまで詳しくわかりません。結局はいじくりながら覚えていくしかないんですね。日々勉強です。

2009/01/17 20:40 基本カスタマイズ
メールフォーム
僕のカスタマイズしたテンプレート、その他テンプレートについて、何か解からないことがあれば何でも聞いてください。具体的に書いて頂けるとありがたいです。

名前:

メール:

件名:

本文:



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。