更新と要約
賞金が付いているので、この質問をより明確にする義務があると感じています。
（また、 CSS3ユニット値がサポートされている場合、これは子供の遊びになると確信しています。たとえば、その時点でインターネットを閲覧していると思いますがcalc()width: calc(25% - 5px)）
私は、設計要件を共有するいくつかのプロジェクトのCSSフレームワークに取り組んでいます。つまり、流動的な12列のレイアウトです。パーセント幅のフロート.column要素を使用すると(100% / 12) x col_size、これはかなり簡単です。ただし、この問題には、列間に固定マージン（または任意の形式の間隔）が追加されることがあります。
私の最初の試みでは、説明したように流体カラムを使用し、.panelそれぞれに子をネストしました。HTML / CSSスニペットは次のとおりです（簡潔にするために縮小）：
.column{
float: left;
display: inline-block;
}
.width-01{ width: 8.3333%; }
.width-02{ width: 16.6666%; }
.width-03{ width: 25%; }
/* etc */
.panel{
width: 100%;
padding: 5px;
box-sizing: border-box; /* so padding doesn't increase width */
}
<div class="column width-02">
<div class="panel">Width-02</div>
</div>
<div class="column width-03">
<div class="panel">Width-03</div>
</div>
<div class="column width-02">
<div class="panel">Width-02</div>
</div>
<div class="column width-05">
<div class="panel">Width-05</div>
</div>
このスニペットは、下の画像のようなレイアウトを生成しますが、すべての.panel要素5pxのすべての側面にパディングがあります。外側の列のコンテンツエッジをビューポート（またはその場合は親コンテナ）のエッジと同じ高さにしようとしています。もう1つのアプローチは、.panelクラスを完全に削除し、列を使用することです。
.column{
float: left;
display: inline-block;
padding-left: 10px;
box-sizing: border-box;
}
.column:first-child{ padding-left: 0px; }
.width-01{ width: 8.3333%; }
.width-02{ width: 16.6666%; }
.width-03{ width: 25%; }
/* etc */
<div class="column width-02">Width-02</div>
<div class="column width-03">Width-03</div>
<div class="column width-02">Width-02</div>
<div class="column width-05">Width-05</div>
繰り返しになりますが、これはうまく機能し、下の画像の結果にさらに近い結果を生成しますが、（実際の）問題は、パディングが列の幅に食い込み、幅の分布を台無しにしていることです。:first-child列のコンテンツ領域の幅は、兄弟よりも10ピクセル（またはマージンサイズが何であれ）大きくなっています。
これは無害に見えるかもしれませんが、気付かないかもしれません。ただし、要素間に正確な（可能な限り正確な）幅の分布を設定する必要がある場合や、作業を完全に簡単にする場合がいくつかあります。
したがって、パディング、マージン、またはそれらの組み合わせを使用するかどうか。隣接するカラムから「マージナル」（*** haha *）コンテンツ領域を奪わないガタースペースの均等な分散を備えた、流体カラム、固定マージンのソリューションはありますか？**
元の質問
検索と試行の結果が単純に不足しているため、これは不可能であると結論付けました。しかし、どこかで答えが得られるのであれば、それはここにあると確信しています。
純粋なCSSを使用して、固定幅のマージンを持つ流動的な幅の列レイアウトを実現する方法はありますか？
重要な注意：この図は単なる例であり、私が達成しようとしている特定のレイアウトではありません。与えられたソリューションは、隣接する列の任意の組み合わせを許可する必要があり、合計幅分布は合計12以下です。参照用に人気のある960グリッドを検討してください。）
注：12列のレイアウトでは、画像の列の幅の分布はそれぞれ2、3、2、および5です。
これまでのところ、パーセンテージを使用してほぼこれを達成するグリッドに頼ってきました。問題は、マージンを達成するために、各列に次の子（私はそれらと呼びます.panel）を追加する必要があることです。
width: 100%;
box-sizing: border-box;
padding: 10px;
これもほぼ問題ありません。このアプローチの問題は、最初と最後の列に外側の「マージン」（10px）があり、各列間の「マージン」が2倍になることです（2 x 10px）
確かに、新しいCSS3calc()値型を含めることで、これははるかに簡単に解決できます。次の方向への何か：
.width-12 > .panel{ width: 100%; }
.width-09 > .panel{
width: calc(75% - 10px);
margin: ...;
}
私はいくつかのJavascriptの修正を持っています、私は「うまくいく」いくつかのものをハックアウトしました、しかし私は探求中です。うまくいけば、最も神聖なグレイルが存在します。
残念ながら、次の解決策と@avallが提供する解決策（単純化には確かに良い選択ですが）は、私が探しているものではありません。主な問題は、マージンが列間で均等に分散されていないことです。
.panelこれが機能していることを確認できる唯一の方法は、パディングを5px次のように減らすことです。
.column:first-child > .panel {
padding-left: 0px;
}
.column:last-child > .panel {
padding-right: 0px;
}
/* not necessary? in any case, haven't tested */
.column:only-child > .panel {
padding-right: 0px;
padding-left: 0px;
}
:last-childIE8が（さらに言えば:only-child）疑似セレクターを認識できないという理由だけで、このソリューションは受け入れられません。
