Webデザイナーブログから学ぶホームページ制作

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

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

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

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

セレクタ{
margin-top:ボックス要素の上側（外側）の余白;
}

/* 基本値 */
margin-top: auto;

/* px値 */
margin-top: 10px;/* 上10pxの余白 */

/* %値 */
margin-top: 10%;/* 上10%の余白 */

/* em値 */
margin-top: 10em;/* 上10emの余白 */

/* rem値 */
margin-top: 5rem;/* 上5remの余白 */