私は、CSSで同じ要素に幅と余白または余白を使用しないでくださいと多くの人々が言及しています。何故ですか?同じ要素に幅と余白/余白を使用していませんか?
答えて
いくつかのブラウザでは、幅は、パディングと余白を含む要素の合計幅として扱われるため、幅は、パディングと余白が追加されるベース幅として扱われるためです。その結果、異なるブラウザでデザインが異なるようになります。
詳細については、W3C page on Box Modelおよびquirksmode's takeを参照してください。
私は、幅、パディング、および/またはマージンを一緒に使用することによって発生する問題に遭遇したことはありません。
有効なDOCTYPEを持っていて、Quirksモードではない限り、予測可能なボックスモデルを持つため、実行しようとしていることを表すためにマージン/パディングから最も適切なものを使用する必要があります。
注: 余白はボーダーの外側に適用され、余白はボーダーの内側に適用されます。 幅はコンテナの内側の幅を意味します。合計幅= margin + border + padding + width(最初と最後の3つが左右の両方に追加されていることに注意してください)。
Quirksモードは、DOCTYPEがHTML 4.01 Transitionalより優れていれば、DOCTYPEによってトリガーされ、標準モードにする必要があるファイルの絶対1行目です。 –
「QuirksモードがDOCTYPEによって起動される」 DOCTYPEが不足すると、すべてのブラウザでQuirksモードになります。 間違ったDOCTYPEを使用すると、ブラウザーをQuirksモードにすることができますが、ブラウザー間で「間違った」内容が異なる可能性があります。 厳密なDOCTYPEを使用するのが最善の方法です。 –
パディングやマージンの値が、幅の値を割り当てられたDOM要素と共存しないようにしていますか?その場合、これは、IEとWeb標準(Firefoxなど)を実装するブラウザの両方と互換性のあるCSSを作成したくない場合にのみ当てはまります。マージンやパディング値なしで通常探しているレイアウトを達成するのは難しいでしょう。しかし、私は両方のブラウザに互換性のあるCSSを書くことをお勧めします。これがあなたが求めているものでない場合は、私を修正してください:)
理由は有名なbox model problemかもしれません。
要約:パディングと余白を幅または高さで使用すると、IEレンダリングでの幅がと異なります。
ボックスモデルの問題は7年前に修正されました。 Internet Explorer 5.xをサポートしていない限り、それは正当な理由ではないし、それでももっと良いアプローチがあります。 – Jim
私は2つの理由を考えることができます:IEの古い「ボックスモデル」は本当にサクサクです)
1、あなたはスタイル{幅の要素がある場合:300ピクセルを。パディング:30px;マージン:20px;}アウトラインは、予想される400px(300pxサイズ+2 30pxパディング+2 20pxマージン)と実際には一致しないかもしれません。実際の幅はパディングを幅計算にロールするあるもたらします。
...
2)一部の人々は少し混乱計算を見つけます。
つまり、私は個人的には余白や余白とともに幅を使用し、問題はありません。パディング/マージンを使用するときに幅を使用しないように自分自身を制限すると、意味のないクラフトをたくさん使ってコードを補うことになります。これは、さまざまなブラウザが要素で何をするのかを意識する必要があることを意味しますが、これが私たちがブラウザーテストする理由です。
多くの人が、IEの欠陥のあるボックスモデルについての考え方に悩まされています。要素の幅、パディング、マージンを使いこなすと、困ってしまうだろうと考えています。
これはかなり古いアドバイスです。a correct doctypeを使用しているとすれば、かなり現代的なブラウザ(IE6 +を含む)はすべて同じボックスモデルで動作します。
これはCSSですが、明らかに百万円のブラウザ間の問題がありますが、悪名高いIEボックスモデルは過去のものになりつつあります。
私は明らかにすべての*現代のブラウザを意味しました。すべてのブラウザではありません。 IE4らはおそらくあなたのDOCTYPEに注意を払わないでしょう。しかし、IE4をターゲットにしているなら、おそらくあなたが所属する1997年に戻ってほしいと思うでしょう。 –
注目すべき重要な点は、パーセンテージ幅を使用することがほとんど不可能であることです。あなたは全幅を取るために、あなたの「コンテンツ」の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;
}
これは余分なマークアップを持っていると少し気になりますが、長期的には多くのことが楽になります。
- 1. 内側の要素に余白と余白が付いているスティッキーフッタ(Ryan Fait)
- 2. インラインリストの余白または余白の使用
- 3. 左/右の自動余白と900px幅の余白がiPad/iPhoneで余分に広い余白で配置されています
- 4. ボタンの余白 - 左余白左の画像の左余白
- 5. Android - EditTextフローティングラベルの余白/余白を減らしますか?
- 6. CSS:iPhone/iPad Safariは余白や余白を要素の周りに追加しますか?
- 7. html2pdfを使用しているときにCSSの左余白と上余白を取り除く方法
- 8. outerHeight(true)に余白が含まれていませんか?
- 9. Googleチャットテーブル内のセルに余白または余白を追加
- 10. 予期しない画像リンク内の余白/余白
- 11. 余白:0自動IEで動作していません
- 12. プロットの1ピクセル幅の白い余白(下側と右側)を取り除くことはできません
- 13. リストビューの余白
- 14. マージンを中心とした要素上の余白マージン:0 auto;
- 15. 余白と余白がレイアウトの計算に問題を引き起こしています
- 16. 余白と方向OrientationChanged wp7
- 17. HTMLの余白とマージン?
- 18. CSSパディングと余白発行
- 19. jQueryを使用して他の要素の高さに基づいて余白を追加します。
- 20. パディングのマージン、余白
- 21. 余白はiframeで崩壊しませんか?
- 22. 余白のないインラインブロック?
- 23. divの幅/高さに余白が追加されますか?
- 24. 余白が0に設定されている場合、余白が空白になる
- 25. HTMLページの余分な余白のソース?
- 26. Firefoxのマイナスの余白で要素を右に移動
- 27. ブートストラップ行の要素に左右の余白を追加する
- 28. Android 2.2では表面に余白ができませんか?
- 29. スタイルワイズ<br>または詰め物/余白要素
- 30. 左右に余白100%
いくつかの例へのリンクがありますか?私はそれが実際に物事にどのように影響するのか不思議です。 – davethegr8
上記を参照してください。また、[この記事] [1]にはもうひとつの詳細な分析があります。 [1]:http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/ –
おっと、Markdownをコメントに使用することはできません。 456bereastreetのために –