5

ボックスモデルを理解していると言うことから始めましょう。開発者としての短い間、私はセマンティックhtmlに非常に厳密に固執し、レスポンシブデザインプラクティスを使用しようとしました。私は最近、Jr。Developerとして新しい会社に就職しましたが、私のSr.は宗教的にパディングに反対しています。彼はそれがどんな場合でも使われることを望まないように。彼は私にすべてに設定された高さと幅を使用することを望んでおり、パディングをシミュレートする必要がある場合は、マージンを使用して子divを追加する必要があります。例えば：

<div class="caption" style="padding: 5px;">
   Caption
</div>

になる必要があります

<div class="caption">
   <div class="captionContainer" style="margin:5px;">
       Caption
   </div>
 </div>

なぜそうなるのか、なぜそれが悪いと思うのかをどうやって説明できるのかを理解しようとしましたが、うまくいきません。それは私にはとても間違っているようです。彼は、パディングが要素の幅を伸ばすためだと言っています。これに対して、私はbox-sizing：border-boxで応答しました。

私は彼の言うことをしなければなりません、しかし時々私達はそれについて話します、そして彼は私の提案をいくらか受け入れているように見えます、しかし私は私が正しいことを言っているとは思いません。それは実際に良いですか？そうでない場合、なぜですか？

この質問はちょっとした議論のために閉じられるかもしれません-yしかし、これは私を夢中にさせており、私は他にどこを向くべきかわかりません。

前もって感謝します！

4

2 に答える 2

1

それは決して良いことではありません。この正確な目的のために作成されたCSSプロパティがpaddingほぼ永久に存在している場合、他のメソッドを使用してボックスにパディングを追加しようとしても意味がありません。

とにかく、私が考えることができる1つの反例は、隣接する垂直マージンが崩壊する可能性があるという事実です。

マージンの崩壊をキャンセルする方法はいくつかありますが（要素のパディングを与えることも1つです！）、これらの方法は、副作用としてマージンの崩壊を防ぐようには設計されておらず、単純な「オフスイッチ」はありません。 "折りたたみ用。

崩壊の性質と目的を理解していない作者は、それを扱うのに苦労していることに気付くでしょう。余白を使用してパディングをシミュレートする場合は、苦労する可能性があります。それはそれだけの価値はありません。

指定されたマークアップは、マージンの崩壊が予期せず発生して頭痛を引き起こす可能性がある場合の代表的な例です。.caption要素に他のスタイル（境界線やパディングなど）がない場合、のマージンはのマージン.captionContainerと結合し、この.captionような結果になります。同様に、マージンを使用してパディングをシミュレートしようとすると、バックファイアが発生するという反例として最適です。

マージンの崩壊によって引き起こされる潜在的な問題と比較して、私は正直に言って、マージンを使用してパディングをシミュレートするのではなく、その問題を解決するように設計されbox-sizing: border-boxているため、必要な正確な幅を維持しながら、良いケースを使用するという提案を見つけます。ブラウザのサポートもかなりまともです（IE8 +）ので、本当に古いブラウザ用に設計しているのでない限り、それを使用しても問題ありません。

明らかに行われたことを行うためにマージンを使用することには、他にもいくつかの潜在的な落とし穴がありますがpadding、マージンの崩壊は、直面する最大の問題の1つです。

于 2012-11-25T08:43:21.183 に答える
0

このように彼を説明してください：

マージンはブロック要素の外側にあり、パディングは内側にあります。

マージンを使用してブロックをその外側のものから分離し、パディングを使用してコンテンツをブロックの端から離します。

于 2012-11-25T08:37:25.007 に答える