Die CSS-Padding-Eigenschaft ist dafür verantwortlich, den Abstand innerhalb eines Elements von seinem Rand aus festzulegen

CSS-Padding-Syntax

Polsterung: oben rechts unten links;

• top – Einzug vom oberen Rand des Elements;
• rechts – Einzug vom rechten Rand des Elements;
• unten – Einzug vom unteren Rand des Elements;
• left – Einzug vom linken Rand des Elements;

Werte werden am häufigsten in Pixeln angegeben. Sie können auch Prozentsätze und andere gültige CSS-Einheiten angeben.

Anmerkung 1
Sie können mehr als vier Werte angeben. Abhängig von der Anzahl der Werte sind die Aktionen unterschiedlich:

• Wenn 3 Werte angegeben sind, legt der erste Wert die Einrückung oben fest, der zweite – gleichzeitig links und rechts und der dritte – unten
• Wenn 2 Werte angegeben sind, legt der erste Wert den Abstand oben und unten fest, der zweite - links und rechts vom Inhalt
• Wenn der Wert auf 1 gesetzt ist, wird die Einrückung für alle Seiten auf die gleiche Einrückung eingestellt. Zum Beispiel:

Polsterung: 10px 10px 10px 10px; Sie können es kompakter spezifizieren: Polsterung: 10px;

Anmerkung 2
Im Gegensatz zur CSS-Margin-Eigenschaft sind negative Füllwerte nicht zulässig.

Padding verfügt außerdem über vier separate CSS-Eigenschaften. Jeder von ihnen ist für eine bestimmte Richtung verantwortlich.

• padding-left – Abstand vom linken Rand des Elements;
• padding-right – Abstand vom rechten Rand des Elements;
• padding-top – Polsterung vom oberen Rand des Elements;
• padding-bottom – Auffüllen vom linken Rand des Elements;

Zum Beispiel

Polsterung: 3px 5px 7px 10px; Oder Sie fragen im Detail nach: padding-left: 10px; padding-right: 5px; Polsterung oben: 3px; Polsterung unten: 7px;

Beispiele mit unterschiedlichen Einzügen innerhalb eines Elements

Beispiel 1: Text innerhalb eines Tags einrücken

Пример с нулевыми отступам (padding: 0px)

Пример с одинаковым отступом от всех границ (padding: 10px)

Пример с разными отступам (padding: 10px 0px 0px 30px)

Вот как это выглядит на странице:

Пример с нулевыми отступам (padding: 0px)

Пример с одинаковым отступом от всех границ (padding: 10px)

Пример с разными отступам (padding: 10px 0px 0px 30px)

Пример 2. Отступ объекта внутри объекта

Шастая по форумам наткнулся на то, что до сих пор возникает вопрос, что делает padding , а что margin , и какие отличия между ними. Именно поэтому я решил напомнить об этом. Итак, не прибегая к заумным фразам поставим задачу и разберём пример, на котором всё станет ясно.

Задача : на странице нужен блок красного цвета (200х200 пикселей), который отступает от краёв браузера сверху и слева на 40 и 70 пикселей соответственно, и текст внутри которого отступает слева и сверху на 40 пикселей.

Решение : смотрим на рисунок и на код. Наш блок красного цвета не должен превышать 200 на 200 пикселей и он должен иметь отступ от краёв браузера (или других блоков контента). Собственно эти отступы мы делаем через margin. Если мы делаем padding, то отступ происходит внутри нашего красного блока и отступы получаются с фоном самого блока (то есть красные).

Zusätzlich zu den verwendeten Eigenschaften (Zeilen 6-9) gibt es auch die Eigenschaften margin-right, padding-right, margin-bottom, padding-bottom – sie dienen zum Einrücken rechts bzw. unten. Die Werte für alle diese Eigenschaften können in Pixel (px), Prozentsätzen (%) oder EM-Einheiten angegeben werden.

Im Prinzip ist das alles. Es gibt jedoch noch einige Besonderheiten bei der Arbeit mit ihnen.

Merkmale von Rand und Polsterung

Bei der Verwendung von Polsterungen müssen die Abmessungen der Polsterung von der Höhe und Breite des Blocks abgezogen werden, da sich sonst die Größe des Blocks um die Größe der Polsterung erhöht.

Wenn einem Block die Werte „margin-left“ und „margin-right“ von „auto“ zugewiesen werden und der Block eine feste Breite (z. B. 400 Pixel) und keine Float-CSS-Eigenschaft hat, wird dieser Block in der Mitte ausgerichtet des Elements, in dem es sich befindet. Tatsächlich wird diese Ausrichtungsmethode normalerweise für Nicht-Gummi-Layouts mit Mittelausrichtung verwendet. Trotz der Tatsache, dass IE 5.5 und früher den Wert auto nicht unterstützen, hindert Sie das dennoch nicht daran, ihn ständig zu verwenden =).

Es ist nicht ratsam, in Tabellen Auffüllungen und Ränder zu verwenden, da der Effekt in verschiedenen Browsern unvorhersehbar ist.

Und das Letzte, was ich sagen wollte. Vergessen Sie nicht, Kurzschreibkonstrukte zu verwenden, z. B. margin: 10px 0 5px 20px;. Wenn der Einzug Null ist, können Sie einfach eine Null eingeben, ohne die Parameter anzugeben. Es ist sehr einfach, sich zu merken, welcher der Parameter sich auf welchen Rand bezieht – bei einem Block erfolgt die Einrückung im Uhrzeigersinn: Die erste Zahl steht oben, die zweite steht rechts, die dritte steht unten, die vierte steht auf der links.

Das ist eigentlich alles, was ich euch heute sagen wollte. Allen ein fröhliches Wochenende!

Hallo, liebe Leser der Blogseite. Heute möchte ich das Thema des Studiums fortsetzen und die Stilregeln berücksichtigen, mit denen Sie Einzüge und Rahmen für HTML-Elemente festlegen können: Rahmen, Rand und Abstand.

Zuvor konnten wir ziemlich einfache Eigenschaften untersuchen, die Schriftarten () und Text () steuerten, und uns das Modell ansehen

Ja, es ist uns auch gelungen, die Nutzungsgrundsätze ausführlich (über mehrere Artikel hinweg) zu betrachten. Jetzt ist es an der Zeit, zu den Regeln überzugehen, die die Grundlage für die Erstellung von Dokumenten (Webseiten) bilden, und wir beginnen mit dem Blockmodell (der Beziehung von HTML-Elementen).

IN allgemeiner Überblick Ich habe bereits über moderne Modelle geschrieben, aber heute gehen wir auf die reinen Einzelheiten ein. Wenn Sie frühere Veröffentlichungen zum Thema lesen möchten, sind Sie herzlich willkommen.

Box-Modell in CSS – Polsterung, Rand und Rand

Drittens können Zinsen verwendet werden. Woraus werden sie gezählt? Es stellt sich heraus, dass ab Behälterbreite(d. h. aus dem Inhaltsbereich des übergeordneten Elements). Darüber hinaus gilt dies nicht nur für den rechten und linken Rand, was logisch wäre, sondern auch für den oberen und unteren Rand. Die Prozentsätze werden genau aus der Breite (und nicht der Höhe) des Containers berechnet.

Beim Festlegen von Dimensionswerten ist zu beachten, dass Margin kann auch negativ sein. Diese. Wenn wir einen positiven Wert für den Außenrand angeben, verschieben wir das angrenzende Element um den angegebenen Abstand. Wenn wir einen negativen Wert angeben, überlappt der benachbarte Block einfach den Block, für den wir diesen negativen Einzug festgelegt haben. Und das wird sehr oft in CSS verwendet.

Nun, es versteht sich von selbst, dass es eine vorgefertigte CSS-Margin-Regel gibt, die es Ihnen in vielen Fällen ermöglicht, die Größe des Codes zu reduzieren, der zum Festlegen der erforderlichen externen Ränder verwendet wird. Die Reihenfolge der Werte darin ist streng geregelt (sie werden durch ein Leerzeichen geschrieben) und muss dem Beispiel entsprechen:

Diese. Die Aufzählung beginnt von oben und wird fortgesetzt im Uhrzeigersinn bis der Kreis mit der rechten Einrückung (rechts) geschlossen ist. Es könnte etwa so aussehen:

Rand: 20px 10px 40px 30px;

Und das bedeutet, dass der Browser über unserem Block 20 Pixel einrücken sollte, rechts - 10, unten - 40 und links - 30. Das heißt. Dieser Eintrag würde äquivalent sein zu:

Die Reduzierung des CSS-Codes ist mit bloßem Auge sichtbar. Aber das ist nicht die Grenze. Es ist durchaus akzeptabel, in einer vorgefertigten Regel nicht nur vier, sondern auch drei, zwei und sogar nur einen Wert zu verwenden. Dadurch wird die Codegröße weiter reduziert. Allerdings wird es nur in bestimmten Fällen möglich sein, die Anzahl der Werte zu reduzieren:

1. Wenn die Ränder links und rechts gleich sind, beispielsweise so: margin:20px 30px 40px 30px;

   Letzteres kann weggelassen werden:

   Rand: 20px 30px 40px;

   Diese beiden vorgefertigten Regeleinträge bewirken dasselbe. Wenn Sie also in Margin einen Eintrag mit drei Werten sehen, dann ist im zweiten (links) der Wert des vierten (rechts) zu sehen.

   Wenn die Einrückungen oben und unten gleich sind, funktioniert ein solcher Trick nicht mehr, da es logischerweise nur möglich ist, die Struktur des Eintrags einer vorgefertigten Regel zu reduzieren Abschneiden doppelter Werte an seinem Ende(und der Wert des unteren Einzugs ist der vorletzte).

2. Wenn zusätzlich zur Gleichheit der Außenränder links und rechts auch deren Werte oben und unten gleich sind: margin:20px 30px 20px 30px;

   oder, was dasselbe ist (wegen Punkt 1):

   Rand:20px 30px 20px;

   Dann kann eine solche vorgefertigte Regel mit nur zwei Werten geschrieben werden, wobei der letzte Wert verworfen wird, der mit dem ersten übereinstimmt:

   Rand: 20px 30px; In diesem Fall beschreibt der erste Wert die Außenränder vertikal und der zweite Wert horizontal.

3. Und schließlich, wenn alle Werte in der Fertigregel gleich sind: margin:20px 20px 20px 20px;

   oder, was dasselbe ist (wegen Punkt 2):

   Rand:20px 20px;

   Das kann man nutzen maximal gekürzter Satztyp(Verwerfen des letzten Werts, der mit dem ersten übereinstimmt):

   Rand:20px; Das bedeutet, dass auf allen Seiten unseres HTML-Elements der gleiche Rand vorhanden ist.

Wenn man über externe Margen spricht, ist ein solches System erwähnenswert „Marginkolloapse“ oder mit anderen Worten: „Margenkollaps“. Kurz gesagt ist der Kern dieses Phänomens wie folgt.

Wenn wir zwei Blöcke haben, die untereinander liegen (das Zusammenklappen der Ränder kann nur vertikal erfolgen) und für beide Blöcke entgegengesetzte äußere Ränder festgelegt sind (z. B. den unteren für oberstes Element und der obere Rand für den unteren), dann absorbiert der größere Randwert den kleineren.

Wenn der obere Block beispielsweise auf Folgendes eingestellt ist:

Rand: 20px 20px 200px 20px;

Und für den unteren:

Rand: 100px 20px 20px 20px;

Dann absorbiert der untere Rand des oberen Blocks (200 Pixel) den oberen Rand des unteren Blocks (100 Pixel, und selbst wenn er gleich 199 Pixel wird, ändert sich nichts), und der resultierende äußere Rand zwischen diesen beiden Blöcken bleibt immer noch gleich 200px. Diese. es wird nur der größere berücksichtigt modulo Margin, und es addiert sich in keiner Weise zum Zählerwert des vertikal benachbarten Elements.

Hierbei handelt es sich um einen Haken, der ausschließlich vertikal funktioniert und horizontal entgegengesetzte Randabmessungen einfach addiert werden. Dies gilt jedoch nur für Ränder mit demselben Vorzeichen. Wenn sie jedoch unterschiedliche Vorzeichen haben, addieren sich ihre Zahlen einfach und die Blöcke werden durch den resultierenden Wert voneinander getrennt.

In diesem Fall zum Beispiel:

Oberer Rand: 20px 20px -20px 20px; Unterer Rand: 10px 20px 20px 20px;

Der resultierende Abstand zwischen den Blöcken beträgt -10 Pixel, d. h. das untere mit 10 Pixeln überlappt sich Top-HTML Element.

Ein weiteres Merkmal der Verwendung der Margin-Regel in CSS ist der angegebene Wert Vertical für Inline-Elemente wird ignoriert. Bei Fragen:

Rand:20px;

Beispielsweise sehen wir bei , einem Inline-Element, tatsächlich nur horizontale Auffüllung, und vertikal werden keine Änderungen vorgenommen.

Wenn ich ein wenig in die Zukunft schaue, sage ich, dass der vertikale Abstand für Inline-Tags funktionieren wird, aber der erhöhte interne Abstand wird sich in keiner Weise auf die Gesamtposition im Verhältnis zu anderen benachbarten Elementen auswirken.

Im Falle eines Block-Tags (Überschriften, Absätze) würde eine Erhöhung des vertikalen Innenabstands dieses Element relativ zu anderen angrenzenden Blöcken verschieben.

Nun, der Rahmen (Rand) bzw. seine Breite ist auch nicht in der Lage, andere angrenzende Blöcke vertikal vom Linien-Tag wegzubewegen. Bei Inline-Elementen ist eine Bewegung nur in eine Richtung möglich – horizontal und das war’s.

Polsterung und Rand – Innenpolsterung und Rahmen

Kommen wir nun zum Festlegen des Abstands mithilfe der Abstandsregel und sehen uns genau an, welche Werte er annehmen kann:

Wie Sie sehen, wird Auto hier nicht erwähnt und diese CSS-Regel erlaubt nicht die Verwendung negativer Werte (sie können nur positiv sein – von Null und höher). Diese. Es gibt keine Möglichkeit, Inhalte mithilfe von Padding über den Rahmen hinaus zu verschieben. Das Maximum, das erreicht werden kann, besteht darin, den Inhalt sehr nah an den Rahmen zu bringen.

Die Prozentsätze darin werden auf die gleiche Weise wie in Margin berechnet – relativ zur Breite des Containers (dem Inhaltsbereich des übergeordneten Elements), in dem unser Element eingeschlossen ist. Zusammengesetzte Auffüllregel in CSS wird gebildet und gehorcht den gleichen Gesetzen wie oben besprochen:

Polsterung: 20px 10px 40px 30px;

In dieser Regel beschreiben wir von oben beginnend alle vier Seiten. Wenn Sie etwas darin reduzieren müssen (auf drei, zwei oder sogar einen Wert), müssen Sie die oben beschriebenen Reduktionsprinzipien für externe Einzüge verwenden, die bei internen Einzügen mit genau demselben Erfolg funktionieren.

Und das Letzte, worauf ich heute noch eingehen möchte, ist der Rahmen, mit dem gesetzt wird Grenze. Sie haben drei Arten von Parametern:

1. Randbreite – legt die Dicke des Randes fest
2. Rahmenfarbe – legt die Farbe fest
3. Rahmenstil – die Art des Rahmens oder die Art der Linie, mit der er gezeichnet wird

Alle drei dieser CSS-Regeln haben einen gültigen Wertesatz:

Linienstärke für Rahmen ( Rahmenbreite) kann entweder durch Zahlen in Em, Ex oder Px oder in Worten angegeben werden:

1. Dünn – dünne Linie;
2. Mittel – Durchschnitt (dieser Wert wird standardmäßig verwendet);
3. Dick – dick.

Als Wert für die Rahmenfarbe ( Randfarbe) können Sie die akzeptierten Methoden zur Angabe verwenden (Hexadezimalcode, Wörter usw.):

Randfarbe:rot;

Wenn die Rahmenfarbe nicht explizit angegeben wird, wird standardmäßig die Farbe verwendet, die für die Schriftart innerhalb des Elements verwendet wird.
Mit der CSS-Eigenschaft „Border-style“ können Sie den Rahmentyp in Worten angeben:

1. Keine – kein Rahmen (Standard)
2. Gepunktet – die Linie wird in Punkten gezeichnet
3. Gestrichelte - gepunktete Linie
4. Durchgezogen – durchgezogene Linie
5. Doppelt - Doppellinie
6. Nut – vertiefter Rahmen
7. Grat - hervorstehend
8. Inset und Outset – Schattenspiele

Da jeder Block vier Seiten hat, kann er natürlich als verwendet werden Allgemeine Regeln, und für jede Seite getrennt:

Das Gleiche gilt für vorgefertigte Grenzregeln— Es kann sowohl für alle Seiten gleichzeitig (Rand) als auch für jede Seite separat (Rand oben, links, unten und rechts) angegeben werden. Die Reihenfolge der Werte ist nicht wichtig:

Rand: 1 Pixel durchgehend rot;

Wenn Sie etwas verpassen, wird stattdessen der Standardwert verwendet.

Viel Erfolg! Bis bald auf den Seiten der Blog-Site

Du könntest interessiert sein

Höhe, Breite und Überlauf – CSS-Regeln zur Beschreibung des Inhaltsbereichs im Blocklayout
Position (absolut, relativ und fest) – Möglichkeiten zur Positionierung von HTML-Elementen in CSS (Regeln links, rechts, oben und unten) Verschiedene Designs für Innen- und Außenbereiche Externe Linksüber CSS
Float und Clear in CSS – Blocklayout-Tools
Anzeige (Block, Keine, Inline) in CSS – Legen Sie den Anzeigetyp von HTML-Elementen auf der Webseite fest
Listenstil (Typ, Bild, Position) – CSS-Regeln um das Erscheinungsbild von Listen anzupassen HTML Quelltext
Hintergrund in CSS (Farbe, Position, Bild, Wiederholung, Anhang) – alles zum Festlegen der Hintergrundfarbe oder des Hintergrundbilds von Html-Elementen
Wozu dient CSS, wie verbindet man Cascading Style Sheets damit? HTML-Dokument und die grundlegende Syntax dieser Sprache So konfigurieren Sie die abwechselnde Hintergrundfarbe von Tabellenzeilen, Listen und anderen HTML-Elementen auf der Site mithilfe der nth-child-Pseudoklasse
Regeln für Schriftart (Stärke, Familie, Größe, Stil) und Zeilenhöhe für die Gestaltung von Schriftarten in CSS

Legt den Wert der Ränder um den Inhalt des Elements fest. Der Rand ist der Abstand von der Innenkante des Elementrahmens zum imaginären Rechteck, das seinen Inhalt begrenzt (Abb. 1).

Reis. 1. Rand links vom Text

Mit der padding-Eigenschaft können Sie den Randwert für alle Seiten eines Elements gleichzeitig festlegen oder Ränder nur für bestimmte Seiten definieren.

Brief Information

Syntax

Polsterung: [<размер> | <проценты>] {1, 4}

Im vorherigen Kapitel haben wir CSS-Eigenschaften wie Rand und Polsterung erwähnt. Jetzt werden wir sie genauer betrachten und überlegen, wie sie sich voneinander unterscheiden und welche Funktionen sie haben.

Sie können auf die eine oder andere Weise Abstände zwischen Elementen erstellen. Wenn Padding jedoch die Einrückung vom Inhalt zum Rand des Blocks ist, dann ist Rand der Abstand von einem Block zum anderen, der Abstand zwischen den Blöcken. Der Screenshot zeigt ein anschauliches Beispiel:

Durch das Auffüllen wird der Inhalt vom Blockrand getrennt, und durch den Rand werden Lücken zwischen den Blöcken geschaffen

Wie Sie sehen, unterscheiden sich CSS-Ränder und -Auffüllungen voneinander, obwohl es manchmal ohne einen Blick auf den Code unmöglich ist, festzustellen, welche Eigenschaft zum Festlegen des Abstands verwendet wird. Dies geschieht, wenn der Rahmen oder Hintergrund des Inhaltsblocks fehlt.

Es gibt die folgenden Eigenschaften, um in CSS einen Rand oder Abstand auf jeder Seite eines Elements festzulegen:

Polsterung:

• Polsterung oben: Bedeutung;
• Polsterung rechts: Bedeutung;
• Polsterung unten: Bedeutung;
• Polsterung links: Bedeutung;

Felder:

• Rand oben: Bedeutung;
• Rand rechts: Bedeutung;
• Rand unten: Bedeutung;
• Rand links: Bedeutung;

Werte können in beliebigen CSS-Einheiten angegeben werden – px, em, %, usw. Beispiel: margin-top: 15px .

Es gibt auch eine sehr praktische Sache wie Kurzform für Margin- und Padding-CSS. Wenn Sie Ränder oder Abstände auf allen vier Seiten eines Elements festlegen müssen, müssen Sie die Eigenschaft nicht für jede Seite einzeln schreiben. Alles wird einfacher: Für Rand und Abstand können Sie 1, 2, 3 oder 4 Werte gleichzeitig angeben. Die Anzahl der Werte bestimmt, wie die Einstellungen verteilt werden:

• 4 Werte: Der Abstand wird für alle Seiten des Elements in der folgenden Reihenfolge festgelegt: oben, rechts, unten, links: Abstand: 2px 4px 5px 10px;
• 3 Werte: Die Polsterung wird zuerst für die Oberseite eingestellt, dann gleichzeitig für die linke und rechte Seite und dann für die Unterseite: Polsterung: 3px 6px 9px;
• 2 Werte: Die Polsterung wird zuerst gleichzeitig von der Ober- und Unterseite und dann gleichzeitig für die linke und rechte Seite eingestellt: Polsterung: 6px 12px;
• 1 Wert: Für alle Seiten des Elements wird die gleiche Polsterung festgelegt: Polsterung: 3px;

Die gleichen Regeln gelten für die CSS-Margin-Eigenschaft. Bitte beachten Sie, dass Sie für den Rand auch negative Werte verwenden können (z. B. -3px), was manchmal sehr nützlich sein kann.

Minimierungsrand

Stellen Sie sich die Situation vor: Zwei Blockelemente liegen übereinander und erhalten Randfelder. Der obere Block ist auf margin: 60px und der untere Block auf margin: 30px eingestellt. Es wäre logisch anzunehmen, dass sich die beiden angrenzenden Felder zweier Elemente einfach berühren und der Abstand zwischen den Blöcken daher 90 Pixel beträgt.

Allerdings liegen die Dinge anders. Tatsächlich tritt in einer solchen Situation ein Effekt auf, der Kollaps genannt wird, wenn aus zwei benachbarten Elementfeldern das größte ausgewählt wird. In unserem Beispiel beträgt die endgültige Lücke zwischen den Elementen 60 Pixel.

Das Reduzieren des Rands funktioniert nur für den oberen und unteren Rand von Elementen und gilt nicht für die Ränder auf der rechten und linken Seite. Der endgültige Lückenwert wird in verschiedenen Situationen unterschiedlich berechnet:

• Wenn beide Randwerte positiv sind, entspricht die resultierende Randgröße dem größeren Wert.
• Wenn einer der Werte negativ ist, müssen Sie zur Berechnung der Feldgröße die Summe der Werte ermitteln. Bei den Werten 20px und -18px beträgt die Feldgröße beispielsweise:
  20 + (-18) = 20 - 18 = 2 Pixel.
• Sind beide Werte negativ, werden die Moduli dieser Zahlen verglichen und die Zahl mit dem größeren Modul (also die kleinere der negativen Zahlen) ausgewählt. Beispiel: Sie müssen die Werte der Felder -6px und -8px vergleichen. Die Moduli der verglichenen Zahlen betragen 6 bzw. 8. Daraus folgt, dass 6 -8. Die resultierende Feldgröße beträgt -8 Pixel.
• Für den Fall, dass die Werte in angegeben sind verschiedene Einheiten CSS werden sie auf eins reduziert, anschließend verglichen und der größere Wert ausgewählt.
• Die Randgröße für untergeordnete Elemente wird auf noch interessantere Weise bestimmt: Wenn ein untergeordnetes Element einen größeren Rand hat als sein übergeordnetes Element, wird ihm Vorrang eingeräumt. In diesem Fall entsprechen die Größen der oberen und unteren Ränder des übergeordneten Elements denen des untergeordneten Elements. In diesem Fall besteht keine Distanz zwischen Eltern und Kind.

Heute werden wir daran arbeiten, den Unterschied zwischen HTML-Padding ( Polsterung) und margin (margin) in CSS. Aber zuerst wollen wir ihre Syntax verstehen. Es gibt verschiedene Möglichkeiten, diese Eigenschaften zu schreiben: reguläre und Kurzschrift:

Polsterung und Rand in CSS

Die normale Notation der betreffenden Eigenschaften ist einfacher zu verstehen, da sie allen anderen Stilnotationen ähnelt:

Regulärer Eintritt:

Polsterung oben: 10px; padding-right: 20px; Polsterung unten: 10px; padding-left: 20px;

Die CSS-Kurzschrift hingegen kombiniert alle diese Eigenschaften in einer gemeinsamen „Padding“-Eigenschaft.

Kurzer Eintrag:

Polsterung: 10px 20px 40px 10px;

Polsterung und Rand haben vier Werte: oben, rechts, unten und links. Die oben gezeigte Kurzschreibweise gibt außerdem vier Werte an, die durch ein Leerzeichen getrennt sind. Der erste von vier Werten ist oben auffüllen, dann rechts auffüllen, unten auffüllen (HTML unten auffüllen) und links auffüllen:

Polsterung: OBEN RECHTS UNTEN LINKS; (Polsterung: oben rechts unten links)

Dieser Eintrag kann auf drei Werte reduziert werden, wenn der linke und rechte Abstand/Rand gleich sind. Wenn beispielsweise der obere Rand 30 Pixel, der linke und rechte Rand 10 Pixel und der untere Rand 40 Pixel beträgt, können Sie die folgende Notation verwenden:

Polsterung: 30px 10px 40px;

Wir reduzieren es auf zwei Werte!

Wenn der obere und untere Abstand/Rand gleich sind und auch der rechte und linke Abstand/Rand gleich sind, können nur zwei Werte angegeben werden. In diesem Beispiel haben wir einen oberen und unteren Abstand von 10 Pixeln und einen linken und rechten Abstand von jeweils 20 Pixeln. Unser CSS wird so aussehen:

Polsterung: OBEN/UNTEN RECHTS/LINKS; (Auffüllung: oben/unten rechts/links) Auffüllung: 10px 20px;

Nur eine Bedeutung!

Unser letzte Version Abkürzung für padding und margin. HTML enthält nur einen Wert. Diese Notation kann verwendet werden, wenn alle Einzüge ( oben, unten, rechts und links) haben die gleiche Bedeutung. Wenn wir wollten, dass alle Seiten einen 20-Pixel-Abstand haben, würde das CSS so aussehen:

Wann welches Aufnahmeformat verwenden? Wenn ich beispielsweise einem Element nur einen unteren Abstand geben möchte, verwende ich die reguläre Notation, da ich die Eigenschaft nur auf eine Seite anwenden muss: padding-bottom: 30px ;

So arbeiten Sie mit PADDING und MARGIN

Es gibt einen deutlichen Unterschied zwischen diesen beiden Eigenschaften. Padding wird verwendet, um den Platz innerhalb des Containers eines HTML-Elements zu definieren. Der Rand wird verwendet, um den Raum um den äußeren Rand von Elementen zu definieren.

Stellen Sie sich vor, Sie würden einen Wintermantel anziehen. Der Mantel ist ein Teil von dir, aber wenn ich dich mit Farbe bewerfen würde, würde sie einen größeren Bereich bedecken, als wenn du diesen Mantel nicht tragen würdest.

Unter Polsterung kann man sich auch die Polsterung in einem Karton vorstellen. Wenn Sie eine Schachtel mit Schaumstoff füllen, halten Sie damit den Inhalt von den Rändern der Schachtel fern. Das Auffüllen in CSS bewirkt das Gleiche.

Stellen Sie sich die Marge nun als ein unsichtbares Kraftfeld um Sie herum vor. Das Kraftfeld hält andere Dinge von dir fern. Um auf das Beispiel von Mantel und Farbe zurückzukommen: Wenn ich Farbe auf Sie werfen würde und sie das Kraftfeld durchdringen könnte, würde sie immer noch nur Sie und Ihren Mantel bedecken.

PADDING und MARGIN am Beispiel einer Site

Schauen wir uns Eigenschaften anhand von Beispielen mit Elementen an. Wir beginnen mit einem Absatz (Tag

), fügen Sie dann eine Hintergrundfarbe hinzu und fügen Sie auf jeder Seite einen Abstand von 30 Pixel hinzu.

Unten links sehen Sie, dass es sich um einen Absatz mit 30 Pixel Abstand handelt. Im Bild rechts habe ich die Werkzeuge verwendet Google Chrome um anzuzeigen, wo die HTML-Auffüllung für dieses Element beginnt/endet. Grüne Farbe Im Bild unten ist die Polsterung zu sehen, die um den Behälter herum angebracht ist. Die dunkelblaue Hintergrundfarbe füllt den Innenbereich:

Fügen wir nun einen Rand zum Absatz hinzu. Ich füge 30 Pixel oben und unten sowie 20 Pixel links und rechts hinzu. Das Bild unten links zeigt, wie sich dieser Absatz gegenüber margin geändert hat. Die tatsächliche Breite des Bildes ist kleiner, da der Rand ein anderes HTML-Element vom Rand wegschiebt. Rechts sehen Sie, dass die orange Farbe den Rand um das Element darstellt. Der Rand liegt immer außerhalb des Abstands und der dunkelblaue Hintergrund reicht nicht bis zum Randbereich:

Wenn Sie sich immer noch nicht sicher sind, wie Sie Padding und Margin-HTML verwenden, ist es Zeit zum Experimentieren! Je häufiger Sie CSS-Eigenschaften verwenden und deren Werte ändern, desto besser werden Sie verstehen, wie sie funktionieren.

Übersetzung des Artikels „ CSS PADDING VS. MARGIN UND WIE MAN SIE VERWENDET“ wurde vom freundlichen Projektteam erstellt.

Gut schlecht

• Lernprogramm

Der Zweck dieses Artikels besteht nicht darin, einfache Dinge zu verkomplizieren, sondern die Aufmerksamkeit auf bekannte Standards zu lenken, die irgendwie in Vergessenheit geraten. Es ist wichtig, in allen Aspekten Ihres Layouts eine sinnvolle Struktur beizubehalten, und es ist ebenso wichtig, diese bei der Einrückung einzuhalten. Und eines der Hauptprinzipien des Layouts ist Flexibilität. Nämlich die Möglichkeit, problemlos Änderungen vorzunehmen, ohne etwas kaputt zu machen. Der richtige Umgang mit Rand und Polsterung spielt dabei eine sehr wichtige Rolle.

Die folgenden Prinzipien werden im Umfeld der Positionierung von Elementen auf der Seite umgesetzt. Sie werden auch in dekorativen Elementen verwendet. Aber nicht so kategorisch.

Grundprinzipien:

1. Der Einzug erfolgt bis zum letzten mögliches Element im Haus.
2. Für unabhängige Elemente (BEM-Block) können keine Einzüge gesetzt werden.
3. Für das letzte Element der Gruppe wird der Einzug (immer) auf Null zurückgesetzt.

Einrückungen gehen vom vorherigen Element zum nächsten.

Das bedeutet, dass Eigenschaften wie margin-left und margin-top werden nicht verwendet(nicht ohne Ausnahmen). Bei der Polsterung ist alles etwas umgekehrt (außer dass sie zu dekorativen Zwecken verwendet wird, die Verbindungsfläche vergrößert usw.). Wenn ein Block oben oder links eine Auffüllung benötigt, erhält er diese von der Auffüllung oben und links der übergeordneten Einheit.

Die Einkerbungen verlaufen in Fließrichtung des Baumhauses, der Block schiebt sich nicht.
Zunächst befindet er sich in einer statischen Position und erhält auf Kosten anderer Auswirkungen.

Die Einrückung erfolgt auf das letztmögliche Element im Haus

Im Beispiel gibt es 3 Listen, im folgenden Aufbau:

• Weit, weit weg, jenseits des Verbalen.

Die Einrückung erfolgt nicht auf Kosten untergeordneter Elemente, sondern auf Kosten benachbarter Elemente.

In dieser Situation ist .main-section__item das letzte mögliche Element, das eingerückt werden kann, um die Listen zu trennen. Der gleiche Effekt kann durch Einrücken eines Div, einer Liste, einer Zeile oder eines Links erzielt werden, dies ist jedoch nicht korrekt.

Dieses Beispiel ist recht einfach. Aber wenn Sie sich eine viel größere Verschachtelung vorstellen, wo jemand mit Einkerbungen übersät ist, wenn einige Ränder zusammenbrechen. und einige werden zu Polsterungen hinzugefügt.

Überschrift in einem Abschnitt von sieben Wörtern

Der einfachste Grund, dabei zu bleiben dieses Prinzip Dies soll es Ihnen oder jemandem, der in Zukunft mit Ihrem Layout arbeiten wird, erleichtern, die Einrückung in Zukunft zu finden. Hier geht es um Bequemlichkeit.

Die eigentlichen Probleme können auftreten, wenn Layouts mit schlechter Einrückungsstruktur dynamisch gerendert oder dupliziert werden.

Für unabhängige Elemente (BEM-Block) können keine Einzüge festgelegt werden.

Wenn Sie einen Block einrücken müssen. Dies erfolgt unbeschadet über:

• Vererbung durch das Element (wenn Sie diesen Block aus dem Element ziehen, entsteht keine Einrückung und Sie können ihn einfach an einer anderen Stelle platzieren).
• Hinzufügen einer Klasse (Sie können einen Block zu einem Element machen).
• Wrapper (wie ein Block, der nur eine Rolle bei der Positionierung spielt).

Beim letzten Element der Gruppe wird die Einrückung auf Null zurückgesetzt (immer).

Für das letzte Li wird die Einrückung auf Null zurückgesetzt. Und die Einkerbung ist gemacht zwischen benachbarten Elementen ul und img. Was im zweiten Prinzip besprochen wurde.

Nehmen wir ein anderes Beispiel:

...

Uns interessiert der Abstand zwischen den Nachrichten, der set.blog-preview__item (margin-bottom: 20px;) ist. Der letzte Rand wird auf Null zurückgesetzt und die untere Einrückung wird durch Auffüllen von blog-preview erstellt. Was im zweiten Prinzip besprochen wurde.

Häufiger als andere Pseudoklassen sollten Sie:last-child verwenden.

Item:not(:last-child) ( margin-bottom: 20px; ) // oder // .item ( // andere Stile // margin-bottom: 20px; &:last-child ( margin-bottom: 0; ) ) // oder margin-top, die Hauptidee liegt hier nicht in der Richtung des Randes, sondern in der Abwesenheit von Überschuss // .item + .item ( margin-top: 20px; ) // oder // .item ( / / andere Stile // & + & ( margin-top: 20px; ) )

Ausnahmen

Natürlich gibt es Sonderfälle, nicht triviale Aufgaben und Nuancen, bei denen es nicht möglich ist, diese Grundsätze einzuhalten, aber ansonsten lohnt es sich, nach idealen Einrückungen zu streben, um das Layout möglichst sauber zu gestalten.

P.S. Ich rate Ihnen, die Veröffentlichung zu lesen

Quelle: Rand oder Polsterung?
Philip Sporrer.
Übersetzung: vl49.

Wann ist es besser, Ränder und wann Auffüllungen für Formatierungszwecke zu verwenden, und macht das einen Unterschied?

Ich habe sehr lange auf der Suche nach passenden Antworten gerungen. Erst nachdem ich eine Menge schrecklichen, nicht entzifferbaren CSS-Code geschrieben hatte, begleitet von verschiedenen Nebenwirkungen, konnte ich mit Sicherheit sagen, dass ich die grundlegenden, eisernen Regeln zu den oben aufgeführten Problemen gefunden hatte.

Schauen wir uns zur Verdeutlichung eine typische Situation an, die wahrscheinlich jedem Benutzeroberflächenentwickler im Jahr 2017 bekannt ist. Wir haben eine einfache Kartenvorlage.

In diesem Beispiel können zwei Arten von Intervallen unterschieden werden:

Es ist hier sehr wichtig zu verstehen, dass es sich um zwei unterschiedliche Konzepte handelt, die in ihrer Zusammenstellung nicht miteinander verknüpft werden sollten. Das heißt, wenn ich den Abstand zwischen den Karten und ihrem Behälter beispielsweise auf 24 Pixel ändern muss, sollte dies keinerlei Auswirkungen auf den Abstand zwischen den Karten selbst haben.

Beispiel mit CSS umsetzen?

Es gibt buchstäblich Tausende von Möglichkeiten, eine Vorlage wie diese mithilfe von Rändern und Auffüllungen zu erstellen, aber ich möchte eine vorstellen, die die korrekte Verwendung der Rand- und Auffüllungseigenschaften demonstriert. Darüber hinaus können Sie mit dieser Methode in Zukunft weitere Karten hinzufügen.

Behälter (
Polsterung: 16px;
}
.card + .card (
Rand: 0 0 0 8px;
}

Nur 2 Selektoren und 2 Regeln.

Welche Funktion hat das Pluszeichen?

Symbol + repräsentiert angrenzender Selektor. Es zeigt nur auf das Element, das unmittelbar auf das vor diesem Selektor angegebene Element folgt.

Wie aus dem Bild oben ersichtlich ist, wird in unserem Fall dieser Selektor auswählen jede Karte, der eine andere Karte vorausgeht. Mit dem nebenstehenden Selektor können wir also den linken Rand für jede Karte außer der ersten festlegen.

Dies bedeutet, dass wir die Möglichkeit haben, beliebig viele Karten hinzuzufügen, deren Abstand zwischen ihnen immer acht Pixel beträgt.

Alles funktioniert einwandfrei, bis wir etwas anderes als eine Karte neben die Karten legen müssen. Nun, sagen wir mal einen Knopf "Karte hinzufügen" ("Karte hinzufügen"):

Dem vorhandenen CSS-Codeausschnitt nach zu urteilen, würden wir die class.card höchstwahrscheinlich nicht dem neuen Element zuweisen, das die Schaltfläche darstellt, da es sich nicht um eine Karte handelt. Wie sein? Lohnt es sich, hierfür eine zusätzliche Klasse namens.add-card zu erstellen, die die gleiche Regel mit der Margin-Eigenschaft enthält wie die class.card? Nein, es gibt eine bessere Lösung.

Lobotomierte Eule *+* .

Wie sieht es aus? Trotz der lustigen Assoziation funktioniert diese Methode großartig und ich verwende sie ständig, seit ich von ihrer Existenz erfahren habe. Worum geht es also? Hier ist ein Blick auf den entsprechenden CSS-Code:

Behälter (
Polsterung: 16px;
}
/* Na ja, hast du die lobotomierte Eule erkannt? 😜 */
.container > * + * (
Rand: 0 0 0 8px;
}

Wie Sie sich vielleicht erinnern, galt der vorherige Selektor für jede Karte, der eine andere Karte vorausging. Jetzt können wir mit seiner Hilfe formatieren jedes Element unmittelbar vor dem sich ein anderes Element befindet, natürlich inklusive des Buttons.

Zusammenfassend.

Ich hoffe aufrichtig, dass das hier präsentierte Material Ihnen dabei geholfen hat zu verstehen, wann Sie Auffüllungen und wann Sie Ränder verwenden sollten, um Inhalte innerhalb eines Containers zu trennen.

Aus diesem Grund möchte ich Ihnen ein Federprojekt vorstellen, das die oben genannten Beispiele sowie zwei aus meiner eigenen Erfahrung getestete Regeln demonstriert. Also verwenden wir:

Polsterung- für Leerzeichen zwischen dem Behälter und seinem Inhalt.

Marge- für Abstände zwischen Elementen innerhalb des Containers.

19 Antworten

TL; DR: Standardmäßig verwende ich überall einen Rand, außer wenn ich einen Rahmen oder Hintergrund habe und den Platz innerhalb dieses sichtbaren Randes vergrößern möchte.

Für mich besteht der größte Unterschied zwischen Padding und Margin darin, dass die vertikalen Ränder automatisch kleiner werden, während Padding dies nicht tut.

Betrachten Sie zwei übereinander liegende Elemente mit jeweils 1em Einzug. Diese Einrückung gilt als Teil des Elements und bleibt immer erhalten.

Sie erhalten also den Inhalt des ersten Elements, gefolgt von der Auffüllung des ersten Elements, dann der Auffüllung des zweiten Elements und schließlich dem Inhalt des zweiten Elements.

Der Inhalt dieser beiden Elemente beträgt also am Ende 2em mal 2 Elemente.

Ersetzen Sie nun diese Polsterung durch einen Rand von 1 cm. Ränder gelten als außerhalb der Elementgrenzen liegend und die Ränder benachbarter Elemente überlappen sich.

In diesem Beispiel erhalten Sie also den Inhalt des ersten Elements, gefolgt von 1em des Kombinationsfelds und dann den Inhalt des zweiten Elements. Der Inhalt dieser beiden Elemente liegt also 1 1em auseinander.

Dies kann sehr nützlich sein, wenn Sie wissen, dass Sie 1em Abstand zwischen Elementen festlegen möchten, unabhängig davon, um welches Element es sich daneben handelt.

Zwei weitere große Unterschiede bestehen darin, dass der Abstand im Klickbereich und in der Hintergrund-/Bildfarbe enthalten ist, nicht jedoch im Feld.

Die beste Erklärung mit Beispielen, Diagrammen und sogar „Probieren Sie es selbst“ ist diese, die ich je gesehen habe.

Die folgende Tabelle zeigt den Momentanwert visuelle Darstellungüber den Unterschied.

Beachten Sie, dass standardkonforme Browser (IE-Macken sind die Ausnahme) nur einen Teil des Inhalts in einer bestimmten Breite anzeigen. Behalten Sie dies also bei Ihren Layoutberechnungen im Auge. Beachten Sie auch, dass im Fensterrahmen Bootstrap 3-Unterstützung sichtbar ist.

MARGE vs POLSTERUNG:

Der Rand wird in einem Element verwendet, um Abstand zwischen diesem Element und anderen Elementen auf der Seite zu schaffen. Wenn der Abstand verwendet wird, um einen Abstand zwischen dem Inhalt und dem Rand eines Elements zu schaffen.

Der Rand ist nicht Teil des Elements, während die Polsterung Teil des Elements ist.

Es gibt eine technischere Erklärung für Ihre Frage, aber wenn Sie nach einer Möglichkeit suchen, über Rand und Polsterung nachzudenken, die Ihnen dabei hilft, zu entscheiden, wann und wie Sie sie verwenden, könnte dies hilfreich sein.

Vergleichen Sie die Elemente des Blocks mit den an der Wand hängenden Bildern:

• Fenster Browser sieht aus wie eine Wand.
• Inhalt sieht aus wie ein Foto.
• Margeähnlich dem Abstand zwischen gerahmten Bildern.
• Zusatz Es sieht aus wie eine Matte um das Foto herum.
• Der Rand ähnelt dem Rahmenrand.

Eine gute Faustregel bei der Entscheidung über Rand und Einzug ist: Marge wenn Sie einen Gegenstand im Verhältnis zu anderen Dingen an der Wand positionieren und Zusatz. > beim Einrichten Aussehen das Element selbst. Durch den Rand wird die Größe des Elements nicht geändert, aber durch Auffüllen wird das Element normalerweise größer als 1 .

1 Dieses Standardfenstermodell kann mithilfe des Box-Sizing-Attributs geändert werden.

Bei den Rändern müssen Sie sich keine Gedanken über die Breite des Elements machen.

Wenn Sie etwas angeben (padding: 10px;), müssen Sie die Breite des Elements reduzieren 20px, speichern " fit" und andere Elemente um ihn herum nicht stören.

Deshalb beginne ich normalerweise damit, Polsterungen zu verwenden, um alles „zusammenzupacken“, und nutze dann Ränder, um kleine Anpassungen vorzunehmen.

Beachten Sie außerdem, dass Polsterungen besser kompatibel sind verschiedene Browser, und IE kommt mit negativen Margen nicht sehr gut zurecht.

Hier ist etwas HTML, das zeigt, wie sich Auffüllung und Rand auf die Klickraten und die Hintergrundfüllung auswirken. Das Objekt empfängt Klicks auf seinen Innenabstand, klickt jedoch auf den Randbereich des Objekts, um zu seinem übergeordneten Objekt zu gelangen.

$(".outer").click(function(e) ( console.log("outer"); e.stopPropagation(); )); $(".inner").click(function(e) ( console.log("inner"); e.stopPropagation(); )); .outer (Abstand: 10 Pixel; Hintergrund: Rot;) .inner (Rand: 10 Pixel; Abstand: 10 Pixel; Hintergrund: Blau; Rand: einfarbig weiß 1 Pixel;)

Ränder räumen den Bereich um das Element (außerhalb des Rahmens) frei, durch Auffüllen wird jedoch der Bereich um den Inhalt (innerhalb des Rahmens) des Elements freigeräumt.

Das bedeutet, dass Ihr Element seine äußeren Grenzen nicht kennt. Wenn Sie also dynamische Web-Steuerelemente entwerfen, empfehle ich, wenn möglich, Auffüllung und Ränder zu verwenden.

Bitte beachten Sie, dass Sie den Rand mehrmals verwenden müssen.

In CSS gibt es zwei Möglichkeiten, Platz um Ihre Elemente herum zu schaffen: Ränder und Innenabstand. In den meisten Anwendungsfällen sind sie funktional identisch, in Wahrheit verhalten sie sich jedoch etwas anders. Es gibt wichtige Unterschiede zwischen Rändern und Innenabständen, die Sie berücksichtigen sollten, wenn Sie auswählen, was Sie zum Verschieben von Elementen auf der Seite verwenden möchten. Wenn jedoch ein beliebiger Rand oder eine Polsterung für den gleichen Effekt verwendet werden kann, hängen viele Entscheidungen von den persönlichen Vorlieben ab.

Wann werden Felder verwendet?

Sie möchten, dass Ihr Abstand außerhalb des erstellten Rahmens erscheint Grenzgrundstück. Ränder liegen außerhalb der Ränder. Sie verwenden sie also, wenn der Rand an einer Stelle bleiben soll. Dies kann nützlich sein, wenn Sie beispielsweise eine Seitenleiste mit einem Rand haben, den Sie vom Hauptinhaltsbereich entfernen möchten.

Sie möchten nicht, dass die Hintergrundfarbe oder das Hintergrundbild in Ihren persönlichen Bereich eindringt. Hintergrundfarben und die Bilder enden am Rand. Wenn Sie Ihre Hintergründe also lieber außerhalb des von Ihnen geschaffenen Raums belassen möchten, sind Ränder die gewünschte Eigenschaft.

Sie möchten den Platz oben und unten in Ihrem Element zurücksetzen. Obere und untere Ränder verhalten sich anders als seitliche Ränder; wenn zwei Felder übereinander platziert werden, verkleinern sie sich auf die Größe der größten Feldgruppe. Wenn ich beispielsweise einen Absatz mit einem oberen Rand von 20 Pixeln und einem unteren Rand von 15 Pixeln festlege, habe ich nur 20 Pixel Abstand zwischen den Absätzen (die beiden Ränder fallen übereinander und der größte gewinnt).

Wann ist eine Dichtung zu verwenden?