マージン・パディング

「margin-bottom」プロパティ

「margin-bottom」プロパティは、ボックス要素の下側(外側)の余白を指定するCSSプロパティです。
余白に負の値を指定することで、複数の領域を重ねて表示させることができます。

「margin-bottom」プロパティの値

ボックス要素の下側(外側)の余白を指定する単位は「auto」「px」「%」「em」「rem」などの値を指定することができます。
※ブラウザの種類により、小数点以下の数値は切り上げされる場合がありますので小数点での指定は推奨できません。

CSSでサイズ指定する単位「px」「%」「em」「rem」の違いと使い分け

「margin-bottom」プロパティの指定方法

ボックス要素の下側(外側)の余白を指定する場合は、「margin-bottom」プロパティを使い適応する値を指定することで実装できます。

「margin-bottom」プロパティ
セレクタ{
margin-bottom:ボックス要素の下側(外側)の余白;
}
値例
/* 基本値 */
margin-bottom: auto;

/* px値 */
margin-bottom: 10px;/* 下10pxの余白 */

/* %値 */
margin-bottom: 10%;/* 下10%の余白 */

/* em値 */
margin-bottom: 10em;/* 下10emの余白 */

/* rem値 */
margin-bottom: 5rem;/* 下5remの余白 */
表示例
ボックス要素の下側(外側)の余白(下10px)
ボックス要素の下側(外側)の余白(下10%)
ボックス要素の下側(外側)の余白(下10em)