Der Unterschied zwischen Rand, Rahmen und Polsterung in CSS

Detaillierte Erläuterung der CSS-Eigenschaft „Padding Margin Border“

Veranschaulichung von CSS-Abstands-, Rand- und Rahmenattributen

Die W3C-Organisation empfiehlt, alle Objekte auf der Webseite in einem Feld zu platzieren. Designer können dieses Feld steuern, indem sie Definitionen für Objekteigenschaften erstellen einschließlich Absätze, Listen, Titel, Bilder und Ebenen. Das Box-Modell definiert hauptsächlich vier Bereiche: Inhalt, Polsterung, Rahmen und Rand. Anfänger sind oft verwirrt über die Ebenen, Beziehungen und gegenseitigen Einflüsse zwischen Rand, Hintergrundfarbe, Hintergrundbild, Innenabstand, Inhalt und Rand. Hier ist ein schematisches 3D-Diagramm des Boxmodells. Ich hoffe, dass es für Sie leichter zu verstehen und zu merken ist.

margin：层的边框以外留的空白
background-color：背景颜色
background-image：背景图片
padding：层的边框到层的内容之间的空白 
border：边框 
content：内容

Als nächstes werden wir über den Schlüssel zu HTML und CSS sprechen – das Box-Modell. Der Schlüssel zum Verständnis des Box-Modells sind die Rand- und Füllattribute. Das richtige Verständnis dieser beiden Attribute ist auch der Schlüssel zum Erlernen der Verwendung des CSS-Layouts.

Hinweis: Warum nicht Margin und Padding übersetzen?
Grund 1: Es gibt kein entsprechendes Wort auf Chinesisch. Auch wenn es ein solches Wort gibt, müssen Sie es beim Schreiben von CSS-Code verwenden Wenn wir sie immer mit chinesischen Wörtern erklären, können die Konzepte von Rand und Polsterung in praktischen Anwendungen leicht verwechselt werden.

Wenn Sie über Grundkenntnisse in HTML verfügen, sollten Sie einige Grundelemente (Elemente) kennen, wie z. B. p, h1~h6, br, div, li, ul, img usw. Wenn diese Elemente unterteilt sind, können sie in Elemente der obersten Ebene, Elemente auf Blockebene und Inline-Elemente unterteilt werden.

Elemente auf Blockebene sind die Haupt- und Schlüsselelemente, aus denen ein HTML besteht, und jedes Element auf Blockebene kann mithilfe des Box-Modells erklärt werden.

Box-Modell: Jedes Element auf Blockebene besteht aus fünf Teilen: Inhalt, Abstand, Hintergrund (einschließlich Hintergrundfarbe und Bildern), Rahmen und Rand.
Die dreidimensionale Ansicht ist wie folgt:

Der Grundriss ist wie folgt:

Aufgrund der beiden oben genannten Bilder glaube ich, dass jeder ein intuitives Verständnis des Box-Modells haben wird.

Im Folgenden werden die Rand- und Füllattribute beschrieben: 1. Rand: umfasst Rand-oben, Rand-rechts, Rand-unten, Rand-links,
steuert den Abstand zwischen Blöcken -Level-Elemente Abstand , sie sind transparent und unsichtbar. Nach den Regeln im Uhrzeigersinn von oben, rechts, unten und links kann es als Rand geschrieben werden: 40px 40px 40px 40px;Zur einfachen Erinnerung sehen Sie sich bitte das folgende Bild an:

Wenn die oberen, unteren, linken und rechten Randwerte gleich sind, kann dies wie folgt abgekürzt werden:

margin: 40px 40px; 

Die ersten 40 Pixel stellen die oberen und unteren Randwerte dar, und die letzten 40 Pixel stellen die linken und rechten Randwerte dar.

Wenn die oberen, unteren, linken und rechten Randwerte konsistent sind, kann dies wie folgt abgekürzt werden:

margin: 40px;

2. Polsterung: einschließlich Polsterung oben, Polsterung rechts, Polsterung unten, Polsterung links,

steuert den Abstand zwischen innerhalb des Elements auf Blockebene, dem Inhalt und dem Rand und Abkürzung. So schreiben Sie das Randattribut.

An diesem Punkt haben wir im Grunde die grundlegende Verwendung von Rand- und Füllattributen verstanden. In praktischen Anwendungen gibt es jedoch immer einige Dinge, die man nicht herausfinden kann und die mehr oder weniger mit der Marge zusammenhängen.

Hinweis: Wenn Sie möchten, dass der Inhalt zweier Elemente vertikal getrennt wird, können Sie entweder padding-top/bottom oder margin-top/bottom wählen und dann

Ruthless. Es wird empfohlen, dass Sie es versuchen Verwenden Sie padding-top/bottom, um Ihren Zweck zu erreichen. Dies liegt daran, dass es in CSS ein Phänomen gibt, bei dem die Ränder zusammenbrechen.

Zusammenbrechende Ränder: Das Phänomen der zusammenbrechenden Ränder tritt nur bei vertikalen Rändern benachbarter oder untergeordneter Elemente auf.

Details sind wie folgt:

Wenn nur eine Seite angegeben ist, wird sie für alle vier Seiten verwendet.
Wenn zwei Seiten vorhanden sind, wird die erste für die Auf-Ab-Seite und die zweite Seite verwendet für links-rechts;
Wenn drei Parameterwerte angegeben sind, ist der erste für oben, der zweite für links-rechts und der dritte für unten -unten-links wird gedrückt. Die Sequenz wirkt auf die vier Seiten.

body { padding: 36px;} //对象四边的补丁边距均为36px 
body { padding: 36px 24px; } //上下两边的补丁边距为36px，左右两边的补丁边距为24px 
body { padding: 36px 24px 18px; } //上、下两边的补丁边距分别为36px、18px，左右两边的补丁边距为24px 
body { padding: 36px 24px 18px 12px; } //上、右、下、左补丁边距分别为36px、24px、18px、12px

Originallink: http://www.cnblogs.com/linjiqin/p/3556497.html