2021/01/05

CSSのmargin等の上下左右の順番【現役エンジニアが解説】

PROGRAM

今回は、CSSのmargin等の上下左右の順番について、四辺と四隅の指定に分け、簡単に解説していきます。

四辺の指定

margin等の四辺の指定では、「上、右、下、左」の順で指定します。

また、他にも「上下、左右」や「上下左右(一律)」の指定方法もあります。

.hoge{
    margin:1px 2px 3px 4px; /* 上1px、右2px、下3px、左4px */
    margin:1px 2px; /* 上下1px、左右2px */
    margin:1px; /* 上下左右1px */
}

上記のコードでは、hogeのクラスを持つ要素にそれぞれの方法でマージンを設定しています。

四隅の指定

border-radiusの四隅の指定では、「左上、右上、右下、左下」の順です。

また、その他にも「左上右下、右上左下」や「四隅(一律)」の指定方法もあります。

.hoge{
    border-radious:10px 20px 30px 40px; /* 左上10px、右上20px、右下30px、左下40px */
}

上記のコードでは、hogeのクラスの要素に左上10ピクセル、右上20ピクセル、右下30ピクセル、左下40ピクセルの角丸を付けています。

三つの指定

四辺の指定では「上下、左右」や「上下左右(一律)」以外に3つの指定もあります。

あまり見かけることはありませんが、この場合は、「上、左右、下」の順になります。

.hoge{
    margin:1px 2px 3px; /* 上1px、左右2px、下3px */
}

上記のコードでは、hogeというクラスを持つ要素に対し、上1ピクセル、左右2ピクセル、下3ピクセルのマージンのスタイルを適用しています。

• facebook
• Tweet
• Read Later