html - パディングを残してコンテナ内のマージンを右に処理する方法

Question

私は共通のセットアップを持っていpadding-rightます。それらを分離するプロパティを持つ内部のコンテンツを含むパディングを持つ div です。アイテムが右端近くにある場合、親 div からのpadding-rightと全体のパディング ( になります) の両方が適用されます。padding-leftどうすればこの問題を克服できますか?

#container {
    padding: 20px;
}

#container div {
    margin: 0 5px 5px 0;
    width: 100px;
    display: inline-block;
}

<div id="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Answer 1

#container div {
    margin: 0 0px 5px 5px;
    width: 100px;
    display: inline-block;
}

#container div:first-child {
    margin-left: 0;
}

:first-child は IE8 でサポートされています。最後の子はそうではありません。だから私はマージンを左に変更しました

Answer 2

ブラウザのサポートについては、

#container > div:last-of-type {
    margin-right: 0;
}

効果的に機能するようです。