ガター-背景またはボーダーのある列のパディングとマージン

列（またはボックス、または任意のレイアウトモジュール）に独自の背景または境界があるために形状がはっきりと見える場合に、樋に推奨される設計ガイドラインは何ですか？

通常、ボックスの端とテキストの間にスペースを入れます。しかし、この空間をどこから想起させるのでしょうか？ボックスを拡張し、またはテキストを縮小？

説明のために、ここにいくつかの（すべてではない）オプションがあります...

（また、任意の数の列と任意の幅のグリッドを使用することもできます-これは例としてのみ機能します-実際の質問は、レイアウトが溝をまたぐたびに尋ねられる可能性があります。）

私はグリッドベースのレイアウトについて山積みにしてきましたが、これまでのところ、この問題に対処する1つだけを見てきました。KhoiVinhによるNudge Your Elementsです。

何が欠けていますか？それとも、明確なガイドラインがないだけですか？

グリッドベースのレイアウトの動機の1つはグローバルな配置の感覚を高めることなので、決定はより多くの配置を要求するものに依存すると主張することができると思います。ボックス、またはその内容？

私が誤解していない限り、Khoi Vinhは彼の記事でオプション3について主張しています。

オプション3とオプション6の間を行き来しているのがわかります。オプション3を使用すると、ボックスが整列しますが、テキストが窮屈に感じられます。しかし、オプション6を使用すると、ボックスもテキストも配置されなくなります（text-edgeとbox-borderの間の暗黙の真ん中が現在配置されている「もの」です）。

ウェブの枠を超えて、本のデザインやページ作成の規範に関する私の読書は、この問題についても触れていません。「クリアな背景に黒い文字」の本の印刷の大部分でキヤノンがどのように機能するかを確認できますが、ページレイアウトに色を追加する（または白黒のスキームを反転させる）と、溝の質問が返ってきます。

うーん、私は質問だと思います。私が図解したオプションを選択するためのガイドラインはありますか、それともデザイナーの法律を超えて冒険したことがありますか？

グリッドを使用するときは常に、それを一貫して使用する必要があります。ただし、1つの要素（通常、特定のページで1つだけ）がある場合を除いて、グリッドを目立つようにするため、またはページのムードを変更するために違反します。 。この作業を行うには、コントラストを大胆で明確に慎重にする必要があります。（「仕事」とは、間違いではないことを意味します。）

厳密にフォローされているグリッドは、平和です。緊張はほとんどありません。目が期待するところに物事が現れ、読者が驚いたり不快に感じたりすることはありません。

この場合、＃4のように背景がグリッドに少し違反していると、間違いのように見えます。ぎこちないです。側溝がまったくないため、ボックスが他の列と混み合っています。オープン性の期待を設定するテキストのオープンリーディングに対して、これは明らかに間違っています。

0はコントラストを提供しないため、2番目の列は残りの列と区別されません。状況によっては、それが必要な場合もあります。

＃5と＃6の「ハーフガター」の例は、ガターを再定義して、ガターを狭くしています。実際には、グリッド全体を水平方向および垂直方向に再定義します。これは、この場合、樋が行間隔とまったく同じになるためです。これはテキスト自体には不向きですが、ボックスで機能します。しかし、＃6では、テキストの上下に比べてテキストの両側に余計な余白があります。それは意味をなさないので、厄介で不快です。空白がより均等に分散されるため、＃5の方が好ましいでしょう。同じ理由で、＃3は＃2よりも望ましいです。

全体として、私はローレンに同意し、ベストショットとして＃3をお勧めします。また、列の数に関係なく、最も一般的なケースです。

ルールがあります。正当な理由がある場合は、必ずそれらを壊すことができますが、そうするときはいつでも、意図的に大胆で、明確に「設計どおり」に行う必要があります。Helvetica BlackとGeorgiaのペアは、両者が異なるため機能します。Trebuchetは、Verdanaの格子とペアになっていて、神経が十分に異なるため、神経を刺激します。1.5列にまたがる大きな正方形の赤いボックスが機能します。少しオフの灰色のものはしません。

オプション3に投票します。灰色のボックスの端が列を垂直方向に定義しているため、これらの行は（理由なしに）違反できません。ガターは3つの列すべてで同じにする必要があるため、灰色のボックス内にテキストを挿入します。オプション2の差し込みは少し深すぎます。

それは私が印刷物で慣れていることなので、ウェブ上でも「正しく」見える。

これがWeb設計用である場合、ブラウザー間の整合性に懸念がある場合は、水平方向にパディングを使用しないことを強くお勧めします。ブラウザーによって、divとパディングの扱いが異なり、プレゼンテーションが壊れる可能性があります。

どちらにしても、水平方向のマージンのみを使用してください。希望する正確なレイアウトを得るにはクラスを1つまたは2つ追加する必要があります（たとえば、divのマージンのセットと段落のマージンのセットなど）が、長期的にはより信頼性が高くなります。ただし、垂直方向のパディングは通常は問題ありません。