CSS【 margin 】1 ～ マージンとショートハンド

marginプロパティは、CSSでよく使うプロパティですが、特有のルールがあって悩みの種にもなりがちです。
今回は、このmarginプロパティの概要と、ショートハンドについてまとめたいと思います。

marginプロパティについては、以下のページもご参照下さい。
CSS【 margin 】1 ～ マージンとショートハンド（本ページ）
CSS【 margin 】2 ～ autoとwidthと上下と左右
CSS【 margin 】3 ～ ネガティブマージン
CSS【 margin 】4 ～ マージンの相殺 (margin collapsing)（1）
CSS【 margin 】5 ～ マージンの相殺 (margin collapsing)（2）

１．ショートハンドとは

CSSのショートハンドとは、複数のプロパティをまとめて１つのプロパティで指定する方法のことです。ショートハンドを使うと、スタイルシートの内容が読みやすくなったり、コード量が減るためにコーディング作業がスムーズになったりするメリットがあります。

例えば、上下左右のマージンを全部10pxにしたいとき、通常は次のように指定します。

margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;

この書き方だと、指定する際も大変ですが、後で変更があった場合は４箇所の値をそれぞれ修正行する必要があります。

同じ内容の仕様を、ショートハンドを使って指定すると、次のような書き方となります。

margin:10px;

便利で読みやすく、修正作業も捗ります。

marginの他、padding や border、background、font などでもショートハンドが使えます。

ショートハンドを指定できるプロパティ

▲目次へ戻る

２．marginの値

marginプロパティは、要素の外側の隣りのボックスとの間隔、または子要素の場合は親要素のとの間隔を指定します。
marginプロパティの値は、次の通りです。

marginプロパティの値は、継承されません。
また、marginプロパティは、tr要素などテーブル関連の要素を除き、全ての要素で使用できます。

▲目次へ戻る

３．marginのショートハンドの書き方

marginプロパティのショートハンドの書き方には、ルールがあります。
このルールは、paddingプロパティやborderプロパティなどでも共通のルールです。

（CSSソース）
div p {
    background:#e9ffd3;
    margin:3em;} 

（HTMLソース）
<div>
    <p>margin:3em;</p>
</div>

（CSSソース）
div p {
    background:#e9ffd3;
    margin:1em 3em;} 

（HTMLソース）
<div>
    <p>margin:1em 3em;</p>
</div>

（CSSソース）
div p {
    background:#e9ffd3;
    margin:1em 2em 3em;} 

（HTMLソース）
<div>
    <p>margin:1em 2em 3em;</p>
</div>

（CSSソース）
div p {
    background:#e9ffd3;
    margin:1em 2em 3em 0;} 

（HTMLソース）
<div>
    <p>margin:1em 2em 3em 0;</p>
</div>

▲目次へ戻る

４．個別指定のプロパティ

マージンの上下左右の値をショートハンドで指定できるので、個別のmargin-rightプロパティなどは必要ないようにも思えますが、例えば、ショートハンドで値を指定した上で、一部だけピンポイントで値を変えたい場合には、個別指定のプロパティを使います。

入れ子にしたリストを、ショートハンドでmarginプロパティを指定すると、次のような表示になります。

• AList
  • AList1
  • AList2
  • AList3

（CSSソース）
ul#sample1 {border:solid 1px #ccc; margin:0; padding:0; font-weight:bold;}
ul#sample1 li {
	margin:1em;
	padding:1em;
	background:rgba(49, 169, 238, 0.5);
	color:#fff;
	line-height:1em;}
ul#sample5 li ul {margin:0;}
ul#sample5 li ul li {margin:1em 0 1em 3em;}

（HTMLソース）
<ul id="sample1">
    <li>AList
        <ul>
            <li>AList1</li>
            <li>AList2</li>
            <li>AList3</li>
        </ul>
    </li>
</ul>

入れ子にしたul要素内のli要素は、上下のマージンが1emずつですが、マージンの相殺により各li要素間は、合計の2emにはならず、1emとなります。
ですが 最後のli要素は、親のpaddingと自分のmarginのおかげで、下が2em空いてしまいます。

これを、下の空きを他と同じ1emにしたい場合は、最後のli要素だけmargin-bottomプロパティを指定します。

• BList
  • BList1
  • BList2
  • BList3　ここだけ「 margin-bottom: 0 」と指定しています

（CSSソース）
ul#sample2 {border:solid 1px #ccc; margin:0; padding:0; font-weight:bold;}
ul#sample2 li {
	margin:1em;
	padding:1em;
	background:rgba(49, 169, 238, 0.5);
	color:#fff;
	line-height:1em;}
ul#sample2 li ul {margin:0;}
ul#sample2 li ul li {margin:1em 0 1em 3em;}
ul#sample2 li ul li:last-child {margin-bottom:0;}

（HTMLソース）
<ul id="sample2">
    <li>BList
        <ul>
            <li>BList1</li>
            <li>BList2</li>
            <li>BList3</li>
        </ul>
    </li>
</ul>

擬似クラス「 :last-child 」で、最後の要素だけ下マージンを 0 にしています。
ここでは、一番最後の下マージンだけを変更したいので、margin-bottomプロパティを使っています。
このように、シーンに合わせて個別指定のプロパティを使います。

▲目次へ戻る