HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

CSS -Tutorial

CSS-Startseite CSS-Einführung CSS-Syntax CSS-Selektoren CSS-Anleitung CSS-Kommentare CSS-Farben
Farben RGB VERHEXEN HSL
CSS-Hintergründe
Hintergrundfarbe Hintergrundbild Hintergrund Wiederholung Hintergrundanhang Hintergrund Kurzschrift
CSS-Grenzen
Grenzen Rahmenbreite Randfarbe Grenzseiten Grenzkurzschrift Abgerundete Ränder
CSS-Ränder
Ränder Zusammenbruch der Marge
CSS-Padding CSS-Höhe/Breite CSS-Box-Modell CSS-Gliederung
Umriss Outline Width Outline Color Outline Shorthand Outline Offset
CSS-Text
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSS-Schriftarten
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
CSS-Icons CSS-Links CSS-Listen CSS-Tabellen
Table Borders Table Size Table Alignment Table Style Table Responsive
CSS-Anzeige CSS Max-Breite CSS-Position CSS Z-Index CSS-Überlauf CSS-Float
Float Clear Float Examples
CSS Inline-Block CSS-Ausrichtung CSS-Kombinatoren CSS Pseudo-Klasse CSS Pseudo-Element CSS-Opazität CSS-Navigationsleiste
Navbar Vertical Navbar Horizontal Navbar
CSS-Dropdowns CSS-Bildergalerie CSS-Bild-Sprites CSS-Attribut-Selektoren CSS-Formulare CSS-Zähler CSS-Website-Layout CSS-Einheiten CSS-Spezifität CSS !wichtig CSS-Mathematikfunktionen

CSS-Erweitert

Abgerundete CSS-Ecken CSS-Randbilder CSS-Hintergründe CSS-Farben CSS-Farbschlüsselwörter CSS-Verläufe
Linear Gradients Radial Gradients Conic Gradients
CSS-Schatten
Shadow Effects Box Shadow
CSS-Texteffekte CSS-Webfonts CSS-2D-Transformationen CSS-3D-Transformationen CSS-Übergänge CSS-Animationen CSS-Tooltips Bilder im CSS-Stil CSS-Bildreflexion CSS-Objektanpassung CSS-Objektposition CSS-Maskierung CSS-Schaltflächen CSS-Paginierung CSS mehrere Spalten CSS-Benutzeroberfläche CSS-Variablen
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Größe von CSS-Boxen CSS-Medienabfragen CSS MQ-Beispiele CSS-Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS- responsiv

RWD-Einführung RWD-Ansichtsfenster RWD-Rasteransicht RWD-Medienabfragen RWD-Bilder RWD-Videos RWD-Frameworks RWD-Vorlagen

CSS -Raster

Grid-Einführung Grid-Container Rasterelement

CSS -SASS

SASS-Tutorial

CSS- Beispiele

CSS-Vorlagen CSS-Beispiele CSS-Quiz CSS-Übungen CSS-Zertifikat

CSS- Referenzen

CSS-Referenz CSS-Selektoren CSS-Funktionen CSS-Referenz Aural CSS-websichere Schriftarten CSS animierbar CSS-Einheiten CSS PX-EM-Konverter CSS-Farben CSS-Farbwerte CSS-Standardwerte CSS-Browser-Unterstützung

CSS -Randeinbruch

❮ Vorherige Nächste ❯

Manchmal fallen zwei Ränder zu einem einzigen Rand zusammen.

Zusammenbruch der Marge

Die oberen und unteren Ränder von Elementen werden manchmal zu einem einzigen Rand zusammengefasst, der dem größten der beiden Ränder entspricht.

Dies geschieht nicht am linken und rechten Rand! Nur oberer und unterer Rand!

Sehen Sie sich das folgende Beispiel an:

Beispiel

Demonstration des Margeneinbruchs:

h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}

Im obigen Beispiel hat das Element <h1> einen unteren Rand von 50 Pixel und das Element <h2> einen oberen Rand von 20 Pixel.

Der gesunde Menschenverstand scheint darauf hinzudeuten, dass der vertikale Rand zwischen <h1> und <h2> insgesamt 70 Pixel (50 Pixel + 20 Pixel) betragen würde. Aufgrund des Zusammenbruchs der Margen beträgt die tatsächliche Marge jedoch 50 Pixel.

Testen Sie sich mit Übungen

Übung:

Fügen Sie dem Element <h1> einen linken Rand von 20 Pixeln hinzu.

<style>
h1 {
  : 20px;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

Alle CSS-Randeigenschaften

Property Description
margin A shorthand property for setting the margin properties in one declaration
margin-bottom Sets the bottom margin of an element
margin-left Sets the left margin of an element
margin-right Sets the right margin of an element
margin-top Sets the top margin of an element

❮ Vorherige Nächste ❯