Webデザインのマージンの目安は何ですか？
私のWebデザイナーは、Webページでは、空白の余白やパディングは常に標準の倍数であるべきだと言っています。たとえば、6 px、12px、18px。これにより、バランスのとれたレイアウトが生成されます。私はそれについてもう少し学びたいです：
本当にこれに違反してはいけませんか？
標準は水平方向と垂直方向で同じである必要がありますか？
このための最良の学習リソースは、タイポグラフィの良い入門です。おそらく、ブリングハーストによる独創的なクラシックです（Webに適用される適切なまとめについては http://webtypography.net を参照）。 g。 Spiekermannの「Stop Stealing Sheep…」は、初心者にとっても、デザイングリッドにとっても悪くありません（ [UXexchangeに関する私の答え を参照）。
グリッドを設計するときは、ほとんどの場合、すべてのコンテンツが適合する（つまり、その倍数の）基本モジュール（コンテンツoutwardsから作業することで理想的に定義される比率）を使用します）。
ブロック間の垂直マージンと水平マージンは、ほとんどの場合異なります。多くの場合、垂直方向の空白はベースライングリッド上に配置されます（再度、ブリングハーストなどを参照）。単一の垂直リズムで達成するために、1つを使用することを強くお勧めします。
minimum水平方向の空白の量、i。 e。主に本文テキスト（ガター）の列間の分離は、 ゲシュタルトの心理学 によって制御され、フォントサイズ、行間隔、および行幅が主な影響要因です。受信者がテキストブロックを独自の個別のユニットとして認識できるように、テキストブロックを別のテキストブロックから十分に離して配置する必要があります。従来の経験則では、テキスト行内の可能な空白よりも大幅に広く見えるように、ガターは少なくとも1.5 em幅になります。ただし、画面上では、従来の印刷よりも行間が少し広くなる傾向があります。したがって、おそらくそれより少しだけ多くが必要になります。ほとんどの場合、ベースライングリッドと同じ値を使用することから始めるのが適切です。
ところで、設計基準–人間工学または認知心理学によって大幅に裏付けられていない限り–は、より厳密な意味での決して基準ではありません。理由を知っている限り、「標準」に違反する可能性があります。
はいといいえ。デザイナーが参照する可能性があるのは、グループ化による近接性です。空白（あなたの場合はマージン）は、要素の異なるグループを互いに分離します。
トピックの詳細： 明確なWebページデザインのグループ化要素
マージンは特定の幅/高さの比率でのみ見栄えが良いため、相対値-「em」またはパーセントを使用することをお勧めします。
相対的なサイズは、固定レイアウトでも役立ちます。少し縮小/拡大する必要がある場合は、1か所でのみ変更する必要があるためです。
したがって、答えは次のとおりです。ピクセルを使用せず、マージンとボックスサイズに「em」を使用してください。IMHOは0.5emから2emの間である必要があります-視覚的エクスペリエンスに応じて。
垂直マージンと水平マージンの比率は、全体的な「垂直と水平」のリズムに依存します（google）。
このサイトのレイアウトは、複数のパターンを順守することの組み合わせが、バランスの取れた比率と全体的に一貫した構造を生み出す方法の良い例です。たとえば、ロゴは質問セグメントの端から18ピクセルインデントされていますが、ヘッダーセグメント内の上下に約14ピクセルの間隔があり、上下の間隔は左側より約30％小さくなっています。ヘッダーの間隔も同様です。一方、質問ヘッダー内のテキストの間隔は、下部が約9px、上部が13px、左側が約24pxです。これにより、上部の間隔が左側よりも約50％小さくなり、下部の不一致は、ヘッダーテキスト（メインコンテンツから分離されている）に加えて、メインヘッダーの下部へのテキストの配置に関連しています。仕切り付きですが、コンテンツに近く、他のどのコンテンツよりも密接に関連しています）。
割合はさまざまであり、それ自体が芸術です。それには数学がありますが、複雑な構造をまとめることは、実際には、一般的に直感的なプロセスです。
これに関連する本やオンラインリソースは複数あると思いますが、それらはすべて独自の方法で役立つ可能性が高いですが、私の最善のアドバイスは、あなた自身の周りの-自分自身との相対的な割合で熱心な観察者になることです彼らの環境とその環境の他のこと-特に自然の中で。やがて、直感を磨き、それらの比率をより自然に模倣し、適切な設定で適用し始めます。
余白もグリッドによって指定されるグリッドレイアウトの使用を検討してください。私は 960グリッドシステム を使用する傾向がありますが、他の誓うものは他にもたくさんあります。
私にとってこれの利点は、うまくいったものを一度選択してから、何かをレイアウトする必要があるたびにそれについて考えることに時間を費やす必要がないことです。
コンテンツセクション内に標準の間隔を置くと便利です。 IE段落、見出し、リストはすべて、リズムを作成するときと同じように、それらの下に間隔を空ける必要があります。ただし、経験則として、バランスと一貫性を維持します。
あなたは一貫性を持っているはずです-しかし、ページがユーザーに焦点を当てていない場合は、とにかく複数の標準的なマージン/パディングが良いでしょう。私は5の倍数を個人的に試して使用しています。