同じ要素に幅と余白/余白を使用していませんか？

Question

私は、CSSで同じ要素に幅と余白または余白を使用しないでくださいと多くの人々が言及しています。何故ですか？

Answer 1

いくつかのブラウザでは、幅は、パディングと余白を含む要素の合計幅として扱われるため、幅は、パディングと余白が追加されるベース幅として扱われるためです。その結果、異なるブラウザでデザインが異なるようになります。

詳細については、W3C page on Box Modelおよびquirksmode's takeを参照してください。

Answer 2

私は、幅、パディング、および/またはマージンを一緒に使用することによって発生する問題に遭遇したことはありません。

有効なDOCTYPEを持っていて、Quirksモードではない限り、予測可能なボックスモデルを持つため、実行しようとしていることを表すためにマージン/パディングから最も適切なものを使用する必要があります。

注： 余白はボーダーの外側に適用され、余白はボーダーの内側に適用されます。 幅はコンテナの内側の幅を意味します。合計幅= margin + border + padding + width（最初と最後の3つが左右の両方に追加されていることに注意してください）。

Answer 3

パディングやマージンの値が、幅の値を割り当てられたDOM要素と共存しないようにしていますか？その場合、これは、IEとWeb標準（Firefoxなど）を実装するブラウザの両方と互換性のあるCSSを作成したくない場合にのみ当てはまります。マージンやパディング値なしで通常探しているレイアウトを達成するのは難しいでしょう。しかし、私は両方のブラウザに互換性のあるCSSを書くことをお勧めします。これがあなたが求めているものでない場合は、私を修正してください:)

Answer 4

理由は有名なbox model problemかもしれません。

要約：パディングと余白を幅または高さで使用すると、IEレンダリングでの幅がと異なります。

Answer 5

私は2つの理由を考えることができます：IEの古い「ボックスモデル」は本当にサクサクです）

1、あなたはスタイル{幅の要素がある場合：300ピクセルを。パディング：30px;マージン：20px;}アウトラインは、予想される400px（300pxサイズ+2 30pxパディング+2 20pxマージン）と実際には一致しないかもしれません。実際の幅はパディングを幅計算にロールするあるもたらします。

...

2）一部の人々は少し混乱計算を見つけます。

つまり、私は個人的には余白や余白とともに幅を使用し、問題はありません。パディング/マージンを使用するときに幅を使用しないように自分自身を制限すると、意味のないクラフトをたくさん使ってコードを補うことになります。これは、さまざまなブラウザが要素で何をするのかを意識する必要があることを意味しますが、これが私たちがブラウザーテストする理由です。

Answer 6

多くの人が、IEの欠陥のあるボックスモデルについての考え方に悩まされています。要素の幅、パディング、マージンを使いこなすと、困ってしまうだろうと考えています。

これはかなり古いアドバイスです。a correct doctypeを使用しているとすれば、かなり現代的なブラウザ（IE6 +を含む）はすべて同じボックスモデルで動作します。

これはCSSですが、明らかに百万円のブラウザ間の問題がありますが、悪名高いIEボックスモデルは過去のものになりつつあります。

Answer 7

注目すべき重要な点は、パーセンテージ幅を使用することがほとんど不可能であることです。あなたは全幅を取るために、あなたの「コンテンツ」のdivをしたい場合、例えばこれを持っが、10pxのパディングがあります

#content { 
    width: 100%; 
    padding: 0 10px; 
} 

（賢明な、しかし間違った）IEモデルで動作しますが、標準に準拠のブラウザであなたのdivは100％+ 20pxの幅を占めますが、これは良いことではありません。解決策は、別の「内部」コンテナを使用することです。

<div id="content"> 
    <div class="inner"> 
     content here. 
    </div> 
</div> 

#content { 
    width: 100%; 
} 
#content .inner { 
    padding: 0 10px; 
} 

これは余分なマークアップを持っていると少し気になりますが、長期的には多くのことが楽になります。