CSSのmargin等の上下左右の順番【現役エンジニアが解説】
今回は、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ピクセルのマージンのスタイルを適用しています。