CSSで横並びしたときの最後のmarginをなくす方法

横並びをしてその隙間をあけるためにmargin-rightなどで隙間を空けますよね？でもそうすると右側にいらない隙間ができてしまいます。

これを解消するCSSで横並びしたときの最後のmarginをなくす方法を解説します。

【現象】横並びしたとき右に隙間ができる

<style>
.example0{
    display: flex;
    border: 1px solid #999;
    background: #ffeb00;
}
.example0>div{
    width: 30%;
    margin-right: 3.3%;
    box-sizing: border-box;
    padding: 10px;
    background: #b8dbf8;
}
</style>
<div class="example0">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

横並べし、その要素にmargin-rightで間隔をあけます。

すると一番右（3番目）の要素の右も当然空きます。

しかし、一番右は右端にくっつけたい。

これを解決する方法を紹介します。

【解決方法1】marginを使わず両端揃えにする

<style>
.example{
    display: flex;
    /*コレ*/justify-content: space-between;
    border: 1px solid #999;
    background: #ffeb00;
}
.example>div{
    width: 30%;
    /*不要margin-right: 3.3%;*/
    box-sizing: border-box;
    padding: 10px;
    background: #b8dbf8;
}
</style>
<div class="example">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

「justify-content: space-between」は子要素を両端揃えにするCSSです。隙間は自動で等間隔になります。

「justify-content」は「display: flex」とセットで使うものです。floatでは使えません。

また、margin-rightやmargin-leftの指定は不要です。というよりうまくいかなくなるので設定しないようにしましょう。

2行以上にする場合はmargin-bottomかmargin-topの設定をしましょう。

justify-contentを利用するメリットとしてwidthを調整するときmargin-rightの調整が不要だということです。面倒な計算をしなくて済みます。

【解決方法2】1番右のmargin-rightを0にする

<style>
.example2{
    overflow: hidden;
    border: 1px solid #999;
    background: #ffeb00;
}
.example2>div{
    float: left;
    width: 30%;
    margin-right: 5%;
    box-sizing: border-box;
    padding: 10px;
    background: #b8dbf8;
}
.example2>div:nth-of-type(3n){
    margin-right: 0;
}
</style>
<div class="example2">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

flexが使えるときはjustify-content: space-betweenの方法がありますが、floatを使わざるを得ないときもあるでしょう。そんなときの方法です。

3番目のmargin-rightを0にしましょう。

「:nth-of-type(3n)」は3番目を指定する疑似クラスです。

2番目なら「:nth-of-type(2n)」

4番目なら「:nth-of-type(4n)」

3番目の先頭なら「:nth-of-type(3n+1)」となります。

1番目と2番目のmarigin-rightは「3分の1」ではなく「（3-1）分の1」つまり「2分の1」になりますので注意です。計算がちょっと面倒になります。

【解決方法3】左右にmarginを指定する

<style>
.example3{
    overflow: hidden;
    border: 1px solid #999;
    background: #ffeb00;
}
.example3>div{
    float: left;
    width: 30%;
    margin: 0 calc(10% / 6);
    box-sizing: border-box;
    padding: 10px;
    background: #b8dbf8;
}
</style>
<div class="example3">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

消極的な妥協案ですが、「左に寄っているように見えるのが問題なのだから左右に同じ隙間を与えて中央寄せにしちゃえ」という案です。

marginの右と左に同じ数値を指定すると可能です。

しかし計算が非常に面倒です。

【まとめ】横並びしたときの最後のmarginをなくす方法

• 【オススメ】justify-content:space-betweenを指定
• 【floatのとき】:nth-of-type(n)で最後のmarignを0にする
• 【妥協案】左右にmarginを指定して中央揃えにする

以上、CSSで横並びしたときの最後のmarginをなくす方法でした。