margin(マージン)、padding(パディング)

margin(マージン)、padding(パディング)は、ページのレイアウトを考える上で重要なプロパティです。
カテゴリ
SEO対策とユーザビリティ向上
SEO対策とユーザビリティ向上/一覧 (32)


SEO基礎講座


2005年6月
     
18
   

新着エントリ
Google AdSense リンクが斜体文字 (2/25)
Google AdSense「Ads by G」 (2/17)
「まだ違反している」 Google AdSense チームからの返信 (1/28)
1日に1回しか入力されないユニークキーワードは63%(ヤフー) (1/28)
やっと Google AdSense チームに返信できました (1/27)
Google AdSense チーム に返信したらエラー (1/25)
Googleの プログラムポリシーに違反していた (1/24)
「検索結果のページからページ 1 件を削除しました」という Google のメッセージ (1/16)
Googlewashing (11/28)
Google PageRank を確認できるツール (11/27)
検索キーワードランキングレポート (6/23)
「Yahoo!Japan に登録された」とは? (6/22)
YST(Yahoo Search Technology) (6/21)
3桁のコードでカラー指定 (6/20)
margin(マージン)、padding(パディング) (6/18)
Googleの「もしかして」は固有名詞にも対応している (6/17)
必ずしも正確なキーワードで検索されるわけではない (6/16)
H1タグのフォントサイズとマージン変更 (6/16)
SERP(検索結果ページ) (6/15)
検索サービス Ask.jp の検索エンジン Teoma(テオマ) (6/14)
グーグル・アドセンスとグーグル・アドワーズ (6/13)
ブロック要素とインライン要素 (5/12)
P4P(検索結果連動型広告) (4/10)
ホスト pool-**-**-**-**.phil.east.verizon.net (3/8)
ホスト ***.yst.corp.yahoo.com (3/7)
ページ外要因を上げるためのトラックバックについて (2/1)
スニペット (1/26)
クラスタリング (1/25)
パーシャルインデックス (12/18)

新着トラックバック/コメント

リンク集


アーカイブ
2004年 (4)
10月 (2)
11月 (1)
12月 (1)
2005年 (20)
1月 (2)
2月 (1)
3月 (2)
4月 (1)
5月 (1)
6月 (11)
11月 (2)
2006年 (6)
1月 (6)
2007年 (2)
2月 (2)


アクセスカウンタ
今日:19
昨日:63
累計:263,846


RSS/Powered by 「のブログ

[PR]



2005年06月18日(Sat)
< H1タグのフォントサイズ... | スタイルシート/一覧 | 3桁のコードでカラー指定 >  
margin(マージン)、padding(パディング)

margin(マージン)、padding(パディング)は、ページのレイアウトを考える上で重要なプロパティです。margin、padding を簡単に説明すると余白領域です。下図をご参照下さい。

margin(マージン)領域
padding(パディング)領域
スタイルシートを使いこなして綺麗なページを作ろう

上記テキスト スタイルシートを使いこなして綺麗なページを作ろう は、枠線を描いている<div>タグに囲われていますが、枠線の内側の余白領域(白色の領域)は padding プロパティで指定し、枠線の外側の余白領域(紫色の領域)は margin プロパティで指定しています。

スタイルシートの例
div {
margin:10px 0px 5px 20px;
padding:5px 10px;
border:1px solid #000000;
}

補足:
margin で指定している値は左から「上」「右」「下」「左」(時計まわり)
padding で指定している値は左から「上と下」「左と右」です。
margin:10px; というように1つの値だけ指定すると、上下左右全て同じ値に指定したことになります。
border は枠線を設定するプロパティです。