0Pricing
CSS Academy · Lektion

Logische Eigenschaften für Margin, Padding und Border

Ersetzen Sie top/right/bottom/left durch die logischen Entsprechungen start/end/block/inline.

Logische Eigenschaften für Margin, Padding und Border ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Logische Entsprechungen für Abstände

Physische Abstandseigenschaften besitzen logische Entsprechungen, die Block- und Inline-Richtungen verwenden:

  • margin-top → margin-block-start
  • margin-bottom → margin-block-end
  • margin-left → margin-inline-start
  • margin-right → margin-inline-end

Logische Kurzschreibweisen

Neue Kurzschreibweisen decken beide Blockseiten oder beide Inline-Seiten ab:

<div class="card">Card with logical spacing</div>

Zentrieren mit margin-inline: auto

Das klassische Muster zum Zentrieren besitzt jetzt eine logische Entsprechung:

<div class="container">Centered container</div>

Logische Rahmen-Eigenschaften

Legen Sie Rahmen an logischen Seiten fest:

<div class="card">Card with top border</div>
<blockquote class="quote">Quoted text with a gold side border</blockquote>

Logische Positionierungs-Eigenschaften

Auch Positionierungseigenschaften besitzen logische Entsprechungen:

  • top → inset-block-start
  • bottom → inset-block-end
  • left → inset-inline-start
  • right → inset-inline-end

Kurzschreibweise inset

Die Eigenschaft inset ist bereits eine logische Kurzschreibweise für alle vier Seiten. inset-block und inset-inline ermöglichen die Steuerung der beiden Achsen.

<div class="wrap"><div class="overlay"></div></div>

Logische Größen-Eigenschaften

Für Breite und Höhe gibt es logische Entsprechungen:

<div class="box">Sized box</div>

Vergleich: physisch vs. logisch

Eine Seitenleiste mit einem Rahmen an der Startkante:

<div class="sidebar-physical">Physical (border-left)</div>
<div class="sidebar-logical">Logical (border-inline-start)</div>

Logische Werte für float und clear

Die Eigenschaften float und clear unterstützen jetzt logische Werte:

<div class="figure"></div><p>Text wraps around the floated figure.</p><div class="clear">Cleared element</div>

Logisches text-align

text-align: start und text-align: end sind logische Alternativen zu left und right und passen sich automatisch an die Schreibrichtung an.

<div class="nav-link">Aligned to the start (left in LTR)</div>

Migrationsstrategie

Bevorzugen Sie bei neuem Code logische Eigenschaften. Refaktorieren Sie bestehenden Code komponentenweise. Priorität bei der Migration: Abstände (margin/padding), Rahmen, Größen, Positionierung.

Schnelltest

Welche logische Eigenschaft entspricht margin-left in einem LTR-Layout, sollte sich bei RTL aber in margin-right verwandeln?

Zusammenfassung

Logische Eigenschaften für Margin, Padding und Rahmen verwenden block- und inline-Richtungen anstelle der physischen Richtungen top/right/bottom/left. Kurzschreibweisen wie margin-block, padding-inline und inset-block decken beide Seiten gleichzeitig ab. Bevorzugen Sie bei allen Abständen in neuem Code logische Eigenschaften, um automatisch Unterstützung für RTL und vertikale Schreibmodi zu erhalten.

Häufig gestellte Fragen

Ist die Lektion „Logische Eigenschaften für Margin, Padding und Border“ kostenlos?

Ja — der vollständige Text von „Logische Eigenschaften für Margin, Padding und Border“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Logische Eigenschaften für Margin, Padding und Border“?

Ersetzen Sie top/right/bottom/left durch die logischen Entsprechungen start/end/block/inline. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Logische Eigenschaften für Margin, Padding und Border“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Warum logische Eigenschaften: Internationalisierung
  2. Block- und Inline-Richtungen
  3. Logische Eigenschaften für Margin, Padding und Border
  4. Logische Eigenschaften in RTL-Layouts
← Zurück zu CSS Academy