あなたは主にマージン/パディングやポジショニングを使用してHTMLとCSSレイアウトを設計すべきか？

Question

は、HTML5とCSS3デザインを作成するとき、それは主にポジショニングまたは他の方法で回避の上にあなたのデザインのためのマージンとパディングを使用することが良いですか？

私は本当に前にそれについて考えていないし、必要な結果を得るために側で両サイドを使用するが、それは以下の例に示すように、両方の方法で設計することが可能です決してました：

HTML

<div> <ul> <li><span>1</span></li> <li><span>2</span></li> </ul> </div>

CSS例1 - マージン、パディングを使用して

div{ 
    width:1000px; 
    margin:auto; 
    } 
ul{ 
    margin-left:10px; 
    width:100px; 
    } 
li{ 
    height:30px; 
    } 
span{ 
    margin-top:10px; 
    } 

CSS例2 - ちょうど の位置決めを使用：経験則として（別にマージンから自動...）

div, ul, span{ 
    position:absolute; 
    } 

div{ 
    width:1000px; 
    margin:auto; 
    } 
ul{ 
    left:10px; 
    width:100px; 
    } 
li{ 
    height:30px; 
    } 
span{ 
    top:10px; 
    } 

Answer 1

典型的なページレイアウトの場合、例1ははるかにクリーンで、その選択肢を考慮して選択する必要があります。

例2は悪いです。position: absoluteをすべて設定し始めると、設計上の自由度が窓から外れてしまう可能性があるためです。すべてに明示的なディメンションを設定する必要があります。

一般的に（例外があります）、唯一の方法でない限り、メインレイアウトにはposition: absoluteを避けてください。

Here's an example私が話していた種類の問題です。 It would appearは、ユーザーがJavaScriptを使用して問題を解決したことを示しています。良くない。

Answer 2

その名前によって暗示として、position規則は、最も適しています。

margin sが原因ので、あまりその目的に適合ブラウザ間で彼らのモデルの矛盾、非常に信頼性がありません。

は、ほとんどのレイアウト技術は、これらの両方のマッシュアップであることを述べたが、両者は連動して使用されます。

Answer 3

上記のすべて。ポジショニングは、飛び出すか、動的に作成できるものに適しています。時には、位置は実際には派生した配置です。パッディングとマージンは、一般的に、それらの要素が他の要素との関係でどのように配置されるかに使用されます。したがって、アイテムは、パディング、マージン、および位置付けを持つことができ、これらの属性すべてを要素に関連付けることができます。

共通のテーマは、クライアント環境を取得し、その表示可能領域との関係に基づいて設計することです。

このリンクを参照してくださいhttps://stackoverflow.com/a/8857735/1026459 javascriptはクライアントの画面サイズを取得します（クロスブラウザ対応）。