margin（マージン）やpadding（パディング）でよく使われる数字の数と意味

margin（マージン）やpadding（パディング）でよく使われる数字の数と意味

引用部分がいまいち見分けにくかったので、
CSSの入門サイトを参考にさせてもらいながら、
引用部分を点線で囲ってみた。

blockquote { margin: 0px; padding: 10px; border:2px dotted #6ebef2; font-size: 88%; line-height: 1.5em; }

border:2px dotted #6ebef2;
を追加したら、無事できました。

他の要素の意味もやっと分かった。

・margin（マージン）とは外側の余白
・padding（パディング）とは内側の余白
の事を表し、margin（マージン）padding（パディング）共に
上下左右の余白を15px,2.0em,2em,120%などのように指定します。

とのこと。

この指定要素:数字;の数字の所にいくつ数字を並べるかで解釈が変わってきます。

分かりやすくいうと下記参照。

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

覚え方は、
数字が１つの場合は「上右下左」と上から始まって時計回り。
数字が２つの場合は「上下」「右左」
数字が３つの場合は「上」「右左」「下」
数字が４つの場合は「上」「右」「下」「左」

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

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

引用文のカコミの下のアキが調節できて、ちょっとスッキリ。
end