はじめに
Web制作において「要素同士の余白調整」は、見た目やレイアウトの完成度を大きく左右する重要なポイントです。
特に margin-right は、横並び要素のスペース管理において非常によく使われるプロパティです。
今回は、この margin-right だけに焦点を当てて、基本から応用までを個人の備忘録としてまとめました。
書こうと思ったきっかけ
レイアウトを調整しているときに、「左右の余白がうまく取れない」「ボタンとボタンの間が詰まってしまう」といった問題に度々遭遇しました。
特に margin-right の設定をミスすると、思ったような見た目にならないことがあり、自分なりに一度まとめておきたいと思ったのがきっかけです。
内容の説明（margin-right の基本と応用）
margin-right とは？
margin-right は、CSSで要素の右側に余白を設定するためのプロパティです。数値を指定することで、隣接する要素との間隔を柔軟に調整できます。
.box {
margin-right: 20px;
}
この場合、.box 要素の右に20ピクセルの余白が追加されます。
よくある使い方
ボタンやリンクの横並び時のスペース調整
<a href="#" class="btn">前へ</a>
<a href="#" class="btn">次へ</a>
.btn {
margin-right: 10px;
}
→ 最後の要素には右余白が不要な場合、.btn:last-child { margin-right: 0; } で対応できます。
フレックスボックスとの併用
.flex {
display: flex;
}
.flex > div {
margin-right: 16px;
}
.flex > div:last-child {
margin-right: 0;
}
→ 横並びレイアウト時に均等な間隔を取るのに便利。
表やリストの間隔を取る
ラベルと入力欄、メニューアイテムなどを横並びにしたとき、margin-right を調整することで視認性が向上します。
単位について
-
px（ピクセル）：細かい調整に最適 -
%（親要素に対する割合）：柔軟なレイアウトに向いている -
em/rem：フォントサイズに比例した余白指定が可能
まとめ
margin-right は、左右方向のレイアウトを整えるうえで非常に重要なCSSプロパティです。
特にボタンやリンク、アイコンの間隔など、ちょっとした見た目の違いがUI全体の印象を左右することもあります。
必要に応じて :last-child や :not(:last-child) と組み合わせることで、より洗練されたスタイルが実現できます。
この記事はあくまで個人の備忘録としてのまとめですが、同じような悩みを持つ方の参考になれば嬉しいです！