マージン・パディング

「margin-top」プロパティ

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

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

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

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

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

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

「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の余白 */
表示例
ボックス要素の上側(外側)の余白(上10px)
ボックス要素の上側(外側)の余白(上10%)
ボックス要素の上側(外側)の余白(上10em)