Wie man sich in CSS daran erinnert, dass sich der Rand außerhalb des Rahmens und der Abstand innerhalb befindet

Question

Ich bearbeite CSS nicht sehr oft und muss fast jedes Mal nach dem suchen CSS-Box-Modell um zu prüfen, ob padding ist im Inneren border Und margin draußen oder umgekehrt.(Habe gerade noch einmal nachgeschaut und padding ist drinnen).

Hat jemand eine gute Möglichkeit, sich daran zu erinnern?Eine kleine Gedächtnisstütze, eine gute Erklärung, warum die Namen so verdreht sind ...

Answer 1

Wenn Sie mit CSS arbeiten, werden Sie schließlich verrückt. Die gepolsterte Zelle, in die sie Sie stecken, hat die Polsterung auf dem innen der Wände.

Answer 2

Pin - P ist drin

Answer 3

Sie verwenden eine Box.Wenn Sie etwas in eine Kiste legen, legen Sie etwas Polsterung hinein, um sicherzustellen, dass es nicht an den Seiten schlägt.Marge wäre dann das andere.

Answer 4

Drucken Sie das Diagramm aus Kartonabmessungen Abschnitt der Spezifikation und hängen Sie ihn an die Wand.

Answer 5

Für mich klingt „Padding“ einfach innerer als „Margin“.Vielleicht würde es helfen, über die gedruckte Seite nachzudenken?Ränder sind Bereiche ganz außen – in der Regel können Sie nicht einmal bis zum Rand drucken – sie sind nicht markierbar.Könnte der Inhalt innerhalb dieser Ränder aufgefüllt werden, um eine zusätzliche Barriere zwischen dem Inhalt und dem Rand zu schaffen?

Sobald Sie ausreichend mit CSS arbeiten, wird es zur zweiten Natur, sich daran zu erinnern.

Answer 6

Innen kommt meist Polsterung zum Einsatz.Entweder an der Innenseite einer Wand oder an einem Lieferkarton, das ist ganz einfach.Und wenn die Polsterung innen ist, ist der Rand außen.Sollte nicht zu schwer sein.

Answer 7

Ich habe es erst mit der Zeit gelernt – das Box-Modell ist ziemlich einfach, aber der Hauptgrund, warum es den Leuten schwerfällt, ist, weil body bricht das Modell nicht sichtbar.

Wirklich, wenn du gibst body Wenn Sie einen Rand und einen Hintergrund haben, sollten Sie sehen, dass es von einem weißen Streifen umgeben ist.Dies ist jedoch nicht der Fall - bodyDie Polsterung ist die gleiche wie der Rand.Dies stellt einige falsche Dinge über das Box-Modell fest.

Normalerweise denke ich so darüber nach:

• Rand = Abstand um die Box;
• border = der Rand der Box;
• Polsterung = Platz innerhalb der Box.

Answer 8

Tim Saunders hat einige ausgezeichnete Ratschläge gegeben: Als ich zum ersten Mal mit CSS angefangen habe, habe ich Wert darauf gelegt, ein gutes, vollständig kommentiertes Basis-Stylesheet zu erstellen.Dieses Stylesheet wurde viele Male geändert und ist nach wie vor eine hervorragende Ressource.

Als ich jedoch auf meine eigenen Probleme mit dem Boxmodell stieß, fing ich an, „Mo Pi“ zu verwenden.Wie in "Ich bin nicht fett genug, muss ich mo pi essen." Seltsam, aber es hat bei mir funktioniert.Natürlich habe ich beim CSS-Lernen 20 Kilo zugenommen...;-)

Answer 9

Verwenden Sie Firebug, um das Sehen zu erleichtern.

Answer 10

Erstellen Sie selbst ein kommentiertes Basis-Stylesheet, das Sie als Vorlage verwenden können, wenn Sie eine neue Site erstellen oder eine vorhandene Site bearbeiten müssen.

Sie können es mit zunehmendem Wissen erweitern und auf verschiedene Browser anwenden, um zu sehen, wie sich verschiedene Dinge verhalten.

Sie können auch Kommentare oder Beispiele zu anderen schwer zu merkenden Dingen oder Dingen hinzufügen, die nicht intuitiv sind.

Answer 11

Fügen Sie einen Rand hinzu, auch nur vorübergehend.Wenn Sie mit den Zahlen spielen, werden Sie den Unterschied erkennen.

Tatsächlich sind temporäre Ränder um Elemente eine hilfreiche Arbeitsweise, sodass Sie sehen können, warum Floats abgelegt werden usw.

Answer 12

Ich weiß, dass dies eine Antwort auf Ihre Frage ist, aber eher ein Tipp.Immer wenn ich mich mit Rand und Polsterung beschäftige, füge ich einen Rand um den Teil hinzu, mit dem Sie arbeiten. Von dort aus wird mir dann der Raum angezeigt, mit dem ich arbeiten muss.Wenn ich fertig bin, entferne ich den Rand.

Answer 13

PAdding ist ein Teil der PAinting eines Elements:es erweitert das Element Hintergrund.Es ist sinnvoll, sich ein Paar Element+Auffüllung so vorzustellen, dass es einen gemeinsamen Hintergrund hat.Die Polsterung erfolgt analog zur Leinwand des Gemäldes:Je größer die Polsterung, desto größer die Leinwand und damit der Hintergrund.Der Rand (der Rahmen des Gemäldes) würde um dieses Paar herum verlaufen.Und Marge trennt Gemälde an der Galeriewand.Das Nachdenken über das Konzept des Objekthintergrunds hilft dabei, das Paar Objekt + Polsterung zusammenzuhalten.Die üblichen Erklärungen darüber, was innen und außen ist, bleiben nicht im Gedächtnis hängen:Nach einer Weile kehren alle zur ursprünglichen Verwirrung zurück.Denken Sie auch daran, dass die Ränder vertikal faltbar sind, die Polsterung jedoch nicht.

Answer 14

Anstatt immer wieder nach Google zu fragen, verwenden Sie einfach das Inspektorfenster.Wenn Sie auf dieser Registerkarte „Stil“ nach unten scrollen, sehen Sie Folgendes.

Answer 15

Rand: Wenn Sie den Block verschieben möchten.Polsterung:Wenn Sie die Elemente innerhalb eines Blocks verschieben möchten.