2006年11月06日

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

今回はmargin(マージン)やpadding(パディング)について。

そしてその横についている数字の数と意味をご説明していきます。

用語集とは別にここで簡単に説明しておきますと、
・margin(マージン)とは外側の余白
・padding(パディング)とは内側の余白
の事を表し、margin(マージン)padding(パディング)共に上下左右の余白を15px,2.0em,2em,120%などのように指定します。

margin(マージン)padding(パディング)の引数は 1〜4個指定が可能です。


このmargin:5px;とは外側の余白を上右下左5px。という意味です。

margin: 1px;       /* 上下左右=1px */
margin: 1px 2px;     /* 上下=1px、左右=2px */
margin: 1px 2px 3px;   /* 上=1px、左右=2px、下=3px */
margin: 1px 2px 3px 4px; /* 上=1px、右=2px、下=3px、左=4px */



覚え方は、
数字が1つの場合は「上右下左」と上から始まって時計回り。
数字が2つの場合は「上下」「右左」
数字が3つの場合は「上」「右左」「下」
数字が4つの場合は「上」「右」「下」「左」

これらは人それぞれの好みなどがあり書き方は様々です。

自分で一番わかりやすい書き方を決めておくと後々の作業がはかどる事になります。


またmargin:5px;を全く同じ意味ですが違う書き方の例を。

margin-top:5px;
margin-right:5px;
margin-bottom:5px;
marginleft:5px;


この書き方でもmargin:5px;と同じ意味になります。

これらはmargin(マージン)やpadding(パディング)だけに止まらず様々な場面で必要なCSS(スタイルシート)の要素なので覚えておく事をオススメします。
posted by トップ at 09:57| Comment(5) | TrackBack(0) | スタイルシート | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
靴 重り [url=http://www.swimenglandjp.biz]ショーツ[/url] <a href="http://www.swimenglandjp.biz" title="ショーツ">ショーツ</a>
Posted by ショーツ at 2013年07月20日 18:49
写真 水着 [url=http://www.cleasternjp.biz]クリスチャンルブタン メンズ[/url] <a href="http://www.cleasternjp.biz" title="クリスチャンルブタン メンズ">クリスチャンルブタン メンズ</a>
Posted by クリスチャンルブタン メンズ at 2013年07月20日 18:49
クリスチャンルブタン メンズ ハイヒール ルブタン http://www.clespeciallyjp.biz
Posted by ハイヒール ルブタン at 2013年07月20日 18:49
腕時計 電波時計 時計 高級 http://www.advanceshopbulkjp.biz/
Posted by 時計 高級 at 2013年08月03日 10:26
ベビー服 通販 [url=http://www.forshoppingadvertisementjp.biz/]ロレックス エクスプローラー[/url] <a href="http://www.forshoppingadvertisementjp.biz/" title="ロレックス エクスプローラー">ロレックス エクスプローラー</a>
Posted by ロレックス エクスプローラー at 2013年08月03日 10:26
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/26861550
※言及リンクのないトラックバックは受信されません。

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

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