概要
CSSプロパティ「margin-bottom」は、要素の下辺にマージン（余白）を指定することができます。このマージン領域についてですが、これは要素の外側に対して行われます。対して内側に余白をつけたい場合は padding プロパティを利用します。
<div>
<p class="margin-bottom">この要素の下辺にマージンが10px指定されてます</p>
</div>
<style>
* {
margin: 0;
padding: 0;
}
div {
background-color: #def;
border: 1px solid #000;
}
p {
background-color: #fff;
}
.margin-bottom {
margin-bottom: 10px;
}
</style>値の指定方法
{ margin-bottom: キーワード, パーセント, 値(1つから4つ)}実数値 + 以下のような単位で指定します。マイナス値も指定可能です。
| 値 | 説明 |
|---|---|
| auto | 適切な値に置き換えられます。 |
| 値 | px, em, %などで指定。マイナス値も指定可能。 |
値の単位の詳細は以下の通りです。
| 単位 | 説明 |
|---|---|
| px | pxとは画面の1画素（ピクセル）のサイズを１とする単位です。実際に表示されるサイズはモニターの解像度により変化します。 |
| em | 親要素を起点とする文字の高さを１とする単位です。１emは１文字分となります。 |
| % | 親要素の幅を基準に割合を％値で指定した単位です。 |
4辺の値について
要素の外側４辺というのは「上」、「下」、「左」、「右」を指し、まとめて記述することも、一つづつ指定することも可能です。値が１つの場合はその値が４辺全てに反映され、２つの値をいれると「上下」、「左右」に反映されます。更には、４つの値を入れた場合は「上」「右」「下」「左」と、時計回りの順序で指定が反映されます。
| 値 | 説明 |
|---|---|
| margin: 5px | 「上下左右」に5pxの余白を指定します。 |
| margin: 5px 10px | 「上下」に5px、 「左右」に10pxの余白を指定します。 |
| margin: 5px 10px 15px | 「上」に5px、 「左右」に10px、 「下」に15pxの余白を指定します。 |
| margin: 5px 10px 15px 20px | 「上」に5px、 「右」に10px、 「下」に15px、 「左」に20pxの余白を指定します。 |
使用例
画像とテキストの間に余白を設けたデザインを実装してみます。
<div>
<p class="margin-bottom">このテキストの下に２０pxの余白を設けます</p>
<img src="https://www-creators.com/wp-content/uploads/2017/10/sample.jpg" alt="サンプル画像" width="160" height="120">
</div>
<style>
* {
margin: 0;
padding: 0;
}
div {
text-align: center;
}
.margin-bottom {
margin-bottom: 20px;
}
</style>