So setzen Sie CSS-Margen und Polster- und Cool-Layout-Tricks 'Data-Gatsby-Head =' True '/> <meta Property =' Twitter: account_id 'content =' 15743570 'Data-Gatsby-Head = & Q.-CSS-Tutorial-php.cn

Dieses Tutorial verdeutlicht die Unterscheidung zwischen CSS -Margen und Polsterung und veranschaulicht die Auswirkungen auf den Abstand von Webseitenelementen. Wir werden den Rand einstürzen, die Auswirkungen verschiedener Einheiten auf reaktionsschnelles Design und mit den CSS -Margin- und Polsterlayout -Techniken schließen.

Schlüsselkonzepte:

Das CSS -Box -Modell ist grundlegend: Elemente sind rechteckige Kästchen, die durch Inhalt, Polsterung, Rand und Rand definiert sind.
box-sizing verwirrt oft Anfänger. Der Standard box-sizing: content-box fügt der Breite und Höhe des Elements Polster und Grenzen hinzu. box-sizing: border-box ist eine häufige Lösung, die sicherstellen, dass die Polsterung und Grenzen in der angegebenen Breite und Höhe enthalten sind.
CSS steuert auf allen vier Seiten eines Elements genau die Polsterung und den Rand. Polsterung umgibt Inhalte; Rand ist die äußere Schicht, die Platz zwischen dem Element und seinen Nachbarn erzeugt.
Margen und Polsterbetriebe bieten vielseitige Anwendungen: Zentrieren von Elementen, Abstandselementen und Aufrechterhaltung von Bild -Seitenverhältnissen. Das Beherrschen dieser Techniken löst viele Layout -Herausforderungen auf.

Das CSS -Box -Modell verstehen:

CSS -Elemente sind rechteckige Boxen, die aus:

bestehen,

Inhalt
Polster
Grenze
Margin

Inhalt liegt zentral; Padding umschließt Inhalte; Grenzen umgeben die Polsterung; und Rand bildet die äußerste Schicht.

How to Set CSS Margins and Padding, and Cool Layout Tricks

CSS -Boxgröße erklärt:

box-sizing ist eine häufige Quelle der Verwirrung. Zwei 50% Breite Elemente passen möglicherweise aufgrund zusätzlicher Polsterung und Grenzen nicht zu ihrem Behälter.

Die Standardeinstellung box-sizing: content-box erhöht die Gesamtbreite des Elements, wenn Polsterung oder Grenzen hinzugefügt werden. box-sizing: border-box vereinfacht das Layout durch Einbeziehung von Polsterung und Grenzen innerhalb der angegebenen Breite. Viele CSS -Resets verwenden border-box für alle Elemente:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Nach dem Login kopieren

(Hinweis: Einfacheres Zurücksetzen ermöglicht jedoch selektive Ausnahmen.)

Erforschen Sie weitere Ressourcen für MDN oder die box-sizing -Pezifikation. Interaktive Demos verbessern das praktische Verständnis.

Einstellen von Polsterung in CSS:

Polsterung wird mit padding-top, padding-right, padding-bottom, padding-left oder der Kurzform padding Eigenschaft gesteuert:

/* All sides */
padding: 20px;

/* Vertical | Horizontal */
padding: 2em 4em;

/* Top | Horizontal | Bottom */
padding: 1em 20px 2em;

/* Top | Right | Bottom | Left */
padding: 10px 10% 2em 15%;

Nach dem Login kopieren

Eine Codepen -Demo veranschaulicht diese Beispiele. Beobachten Sie den Einfluss des Entfernens box-sizing: border-box.

Rand in CSS einstellen:

Ähnlich wie bei der Polsterung wird der Rand unter Verwendung margin-top, margin-right, margin-bottom, margin-left oder der Kurzschrift margin Eigenschaft gesteuert:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Nach dem Login kopieren

Eine Codepen -Demo zeigt die Randnutzung mit schwebenden Elementen.

Rand und Polsterüberlegungen:

Einheitsauswahl: Vermeiden Sie absolute Einheiten (Pixel) für Ränder und Polsterung in reaktionsschnellem Design. Prozentsatzbasierte Werte passen sich an Änderungen der Bildschirmgröße an. em Einheiten skalieren mit Schriftgröße. Ansichtsfenster -Einheiten (vw, vh, vmin, vmax) basieren auf der Ansichtsfenstergröße.

Einheitsberechnung: Prozentsätze sind relativ zur Breite des übergeordneten Elements. em Einheiten sind relativ zur Schriftgröße des Elements. Ansichtsfenster sind relativ zu den Ansichtsfenster -Dimensionen.

Rand Zusammenbruch: Die oberen und unteren Ränder der benachbarten Geschwisterelemente können in einen einzigen Rand zusammenbrechen. Eltern-Kind-Ränder können ebenfalls zusammenbrechen. Das Hinzufügen von Polsterung oder Grenzen verhindert dies.

Praktische Anwendungen:

Zentrierelemente: Verwenden Sie margin: 10px auto;, um Elemente auf Blockebene horizontal innerhalb ihres Elternteils zu zentrieren.
Abstandselemente: Ränder effektiv Raumelemente auseinander, besonders nützlich bei Flexbox.
Aufrechterhalten von Seitenverhältnissen: Stellen Sie die Höhe des Elternteils auf Null fest und verwenden padding-top

Schlussfolgerung:

Dieses Tutorial unterscheidet die Margen und Polsterung und demonstriert ihre Kurzsyntax und die geeigneten Einheiten. Praktische Layoutanwendungen und weitere Ressourcen werden bereitgestellt. Verbessern Sie Ihre CSS -Fähigkeiten mit fortschrittlichen Techniken.

FAQs:

Rand ist externer Raum; Polsterung ist interner Raum.
Verwenden Sie und Eigenschaften mit verschiedenen Einheiten (Pixel, Prozentsätze, margin, padding). em rem
Die Eigenschaft ermöglicht das Einstellen aller vier Ränder. margin
Negative Werte sind für beide zulässig.
Wert: auto Für Margen -Zentren -Elemente horizontal. auto
Prozentsätze sind relativ zur Breite des Elternteils.