忍者ブログ

[PR]

2018年07月22日

たくさんの方にこの情報を広められるように、ぜひソーシャルブックマークお願いします。
下のボタンをクリックすると、共有できます。

Yahoo!ブックマークに登録
このエントリーをはてなブックマークに追加

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

応援クリックお願いします。
ブログランキング・にほんブログ村へ  人気ブログランキングへ  FC2ブログランキング

余白の設定の方法

2009年12月01日

たくさんの方にこの情報を広められるように、ぜひソーシャルブックマークお願いします。
下のボタンをクリックすると、共有できます。

Yahoo!ブックマークに登録
このエントリーをはてなブックマークに追加

今回は余白の設定の方法です。

前々回にフロートでdivボックスとdivボックスの間に余白を作る方法を説明しましたが、余白の設定は本来marginとpaddingで行います。

marginはdivの外の余白を指定するのに使い、paddingはdivの中に余白を設定するのに使います。
図で表すと以下の通りです。

image4.gif
※わかりやすいようにdivに黒い線をつけています。


marginの指定は以下の通りです。
・どの方向か個別に指定する場合
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
・4方向まとめて指定する場合
margin:10px 20px 30px 40px;
(上、右、下、左の順番で指定します。)
・4方向同じ余白を指定する場合
margin:10px;

同様にpaddingの指定方法は以下の通りです。
・どの方向か個別に指定する場合
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
・4方向まとめて指定する場合
padding:10px 20px 30px 40px;
(上、右、下、左の順番で指定します。)
・4方向同じ余白を指定する場合
padding:10px;
PR

応援クリックお願いします。
ブログランキング・にほんブログ村へ  人気ブログランキングへ  FC2ブログランキング

Comment
  Vodafone絵文字 i-mode絵文字 Ezweb絵文字

SEO対策はこちら

無料で被リンク100件もらえる!
無料で被リンク100

私が管理している自動相互リンクサイトです。
SEO対策にお役立てください。
自動相互リンクで被リンクを増やしてSEO対策!

カテゴリー

独自ドメイン

アーカイブ

最新記事

最古記事

RSS

ブログ内検索

バーコード

リンク

アクセス解析