css - マージンがボーダーの外側にあり、パディングが内側にあることを CSS で覚える方法

Question

私は CSS を頻繁に編集するわけではありません。ほとんどの場合、CSS ボックスモデルpaddingをグーグル検索して、内側borderとmargin外側、またはその逆を確認する必要があります。（もう一度確認したところ、padding中にあります）。

これを覚える良い方法を持っている人はいますか？少しニーモニック、なぜ名前がそのようになっているのかについての良い説明...

score 149 · Accepted Answer

CSS を使用すると、最終的に、壁の内側にパディングが配置されるパディングされたセルに気が狂ってしまいます。

score 5 · Accepted Answer

5

ピン - P が入っています

于 2008-08-28T16:07:14.097 に答える

score 5 · Accepted Answer

ボックスを使用しています。箱に何かを入れる場合は、内側にパッドを入れて、側面にぶつからないようにします. マージンは別のものになります。

score 4 · Accepted Answer

4

仕様書の「箱の寸法」セクションから図を印刷し、壁に貼ります。

于 2008-08-28T16:07:38.777 に答える

score 4 · Accepted Answer

私にとって、「パディング」は「マージン」よりも内側に聞こえるだけです。おそらく、印刷されたページについて考えてみてください。余白は、はるか外側の領域です。通常、端まで印刷することさえできません。マークを付けることはできません。これらのマージン内で、コンテンツをパディングして、コンテンツとマージンの間に追加のバリアを提供できますか?

CSS を十分に扱うようになると、これを覚えることが自然になります。

score 3 · Accepted Answer

私は時間の経過とともにそれを学びました.ボックスモデルはかなり単純ですが、人々がそれを難しいと感じる主な理由はbody、モデルを目に見えて壊さないからです.

実際、body余白と背景を指定すると、白い帯で囲まれているはずです。ただし、そうではありませんbody。のパディングはマージンと同じです。これにより、ボックスモデルに関するいくつかの誤りが確立されます。

私は通常、次のように考えます。

margin = ボックスの周りの間隔;
border = ボックスの端。
パディング = ボックス内のスペース。

score 3 · Accepted Answer

パディングは通常内部で使用されます。壁の内側でも宅配ボックスでも、それは簡単です。パディングが内側の場合、マージンは外側です。難しすぎてはいけません。

score 2 · Accepted Answer

Tim Saunders はいくつかの優れたアドバイスをくれました。CSS を使い始めたとき、完全にコメント付きの優れたベーススタイルシートを作成することを強調しました。そのスタイルシートは何度も変更されましたが、今でも素晴らしいリソースです。

しかし、自分のボックスモデルの問題に遭遇したとき、私は「Mo Pi」を使い始めました. 「私は十分に太っていないので、モパイを食べる必要があります」のように。奇妙ですが、それは私にとってはうまくいきました。もちろん、CSS の学習中に 20 ポンドも体重が増えました...;-)

score 2 · Accepted Answer

2

あなたが見るのを助けるためにfirebugを使用してください。

于 2008-08-28T16:10:12.000 に答える

score 1 · Accepted Answer

一時的であっても、境界線を追加します。数字で遊んでいくと、違いがわかります。

実際、要素の周囲の一時的な境界線は、フロートがドロップしている理由などを確認できるように、作業に役立ちます。

score 1 · Accepted Answer

これがあなたの質問に対する答えであることは知っていますが、それ以上のヒントです。マージンとパディングを扱っているときはいつでも、作業している部分の周りに境界線を追加します。そこから、作業しなければならない部屋が表示されます. すべての設定が完了したら、境界線を削除します。

score 1 · Accepted Answer

新しいサイトを作成したり、既存のサイトを編集したりする必要があるときはいつでもテンプレートとして使用できる、コメント付きのベーススタイルシートを自分で作成します。

知識が増えるにつれて追加し、さまざまなブラウザーに適用して、さまざまな動作を確認できます。

また、他の覚えにくいものや直感に反するものについて、コメントや例を追加することもできます。

score 1 · Accepted Answer

PAdding は、要素の PAinting の一部です。要素のbackgroundを拡張します。要素とパディングのペアを共通の背景を共有していると考えるのは理にかなっています。パディングは絵画のキャンバスに似ています。パディングが大きいほど、キャンバスが大きくなり、したがって背景も大きくなります。境界線 (絵のフレーム) がそのペアを囲みます。そしてマージンは、ギャラリーの壁の絵を分けます。オブジェクトの背景の概念について考えると、オブジェクトとパディングのペアを結び付けるのに役立ちます。内部と外部の通常の説明は、記憶に固執しません。しばらくすると、誰もが元の混乱に戻ります。また、マージンは垂直方向に折りたたむことができますが、パディングは折りたためないことに注意してください。

score 0 · Accepted Answer

Google に何度も尋ねる代わりに、インスペクタウィンドウを使用するだけです。そのスタイルタブで下にスクロールすると、このように表示されます。

score -1 · Accepted Answer

余白：ブロックを動かしたいとき。パディング: ブロック内でアイテムを移動したい場合。

css - マージンがボーダーの外側にあり、パディングが内側にあることを CSS で覚える方法

15 に答える 15

Related

Reference