賛否両論はありません。それは完全にあなたのデザイン次第です。あなたが何をしたいのか、を使用margin-right
すると、正当な理由もなく最後の要素margin-right
が表示されます。たとえば、3 つのボックスがあり、左にフロートしている、またはそれらが表示されているとします。inline-block
右マージンがあるため、最後のボックスはテンプレートの右端に触れず、代わりに折り返されて下に移動します。

赤いスペースが見えますか、それmargin-right
は最後の要素のためのもので、必要ありません. さらにシフトすると、div
下に移動します。
解決?
レガシー ブラウザをサポートしたい場合は、最後の要素にクラスを割り当てて と書きますmargin-right: 0;
。たとえば、3 つli
の要素をフローティングにするので、次のように書きます。
ul.class_name li.class_name {
margin-right: 0;
}
:last-child
それ以外の場合は、余分なマージンを取り除くために pseudo を使用できます。
そうなる
ul.class_name li:last-child {
margin-right: 0;
}
左でも同じことが言えますが、and を使用する代わりに:last-child
、それぞれandmargin-right
を使用する必要があります。margin-left
:first-child
最後になりましたが、両側にマージンを使用すると、両側にスペースが作成され、レイアウトの方向性が失われます。

上記の場合、両方を使用する必要があります。クラスを最初と最後の要素に割り当てるか、最初の要素と最後の要素で and を使用して:first-child
取り除く必要:last-child
があります。margin
left
margin
right
結論: あなたが持っている 2 つのボックスの場合、またはをmargin-right
使用して最後の要素の余分なものを削除する必要があります。class
:last-child
margin