そしてその横についている数字の数と意味をご説明していきます。
用語集とは別にここで簡単に説明しておきますと、
・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(スタイルシート)の要素なので覚えておく事をオススメします。
ラベル:マージン パディング margin padding 外側の余白 内側の余白 CSS スタイルシート カスケーディングスタイルシート 指定要素 アフィリエイト テンプレート HTML XHTML
【関連する記事】

