どうも！ニシドラ(@nishidorablog)です。
この記事では、marginプロパティについて解説します。
marginプロパティとは、要素同士の間隔を調整するときに指定するプロパティです。
marginプロパティとはどんなプロパティなのかや指定する値とその使い方、ちょっとしたテクニックについて解説していきます。
当ブログ(ニシドラブログ)では、他にもCSSの使い方について解説をしています。
marginプロパティとは？
「marginプロパティ」のmarginは英語で「余白」という意味を持っています。
上の画像で説明すると外枠とテキストボックスの間を調整することができます。
指定する値は数値を使います。
指定する値と使い方
数値の指定で使える単位は「px」「%」「rem」「em」です。
また、「auto」を指定することで関連するプロパティの値によって自動で設定することもできます。
下の記事でこれらの単位について解説しているので興味があればぜひ読んでみてください。
marginプロパティでは上下左右の余白を指定することができます。
指定する順番は上から時計回りに「上⇒右⇒下⇒左」の順番で指定することができ、数値と数値の間に半角スペースで区切ることで一括指定することができます。
| margin: 10px; | 上下左右の余白を10pxに指定 |
| margin: 10px 20px; | 上下の余白を10pxに、左右の余白を20pxに指定 |
| margin: 10px 20px 30px; | 上の余白を10pxに、左右の余白を20pxに、下の余白を30pxに指定 |
| margin: 10px 20px 30px 40px; | 上の余白を10pxに、右の余白を20pxに、下の余白を30pxに、左の余白を40pxに指定 |
任意の方向の余白を空けたいとき
marginプロパティは任意の方向を指定して余白を空ける方法があります。
| margin-top | 上方向を指定して余白を空ける |
| margin-right | 右方向を指定して余白を空ける |
| margin-bottom | 下方向を指定して余白を空ける |
| margin-left | 左方向を指定して余白を空ける |
上の表のように「margin-top」では上方向の余白、「margin-right」では右方向の余白、「margin-bottom」では下方向の余白、「margin-left」では左方向の余白を空けることができます。
使用例として、要素の余白を上に40px、左に20pxの余白を空けるとします。
外の大きな枠にクラス名「box」、中の「marginプロパティ」と書かれた枠をクラス名「box-in」とします。
(高さ・横幅・背景の色など細かい設定をしています)
<div class=”box”>
<h2 class=”box-in”>marginプロパティ</h2>
</div>
.box-in {
margin-top: 40px ;
margin-left: 20px;
}
すると上画像のようにブラウザ上で表示されます。
正確な数値は書かれていませんが、上に40px、左に20pxの余白を空けることができました。
まとめ
簡単にですが、「marginプロパティ」について解説してきました。
前項で解説した「margin-top」や「margin-left」というような指定をしなくても、任意の方向以外を「0」にすることで単にmarginで指定することができます。
.box-in {
margin: 40px 0 0 20px;
}
.box-in {
margin-top: 40px ;
margin-left: 20px;
}
上のCSSコードは同じ意味を持っています。
不必要に長いコートを書かない工夫も必要です。
コメント