0Pricing
CSS Academy · Lektion

Breite, Höhe, Margin und Padding verstehen

Lernen Sie, wie width, height, margin und padding die Abmessungen und Abstände von Elementen festlegen.

Breite, Höhe, Margin und Padding verstehen ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.

Das Box-Modell

Jedes HTML-Element wird als rechteckige Box dargestellt. Das CSS-Box-Modell beschreibt die vier Ebenen, aus denen diese Box von innen nach außen besteht: content → padding → border → margin.

width und height

width und height legen die Abmessungen des Inhaltsbereichs fest. Standardmäßig werden Innenabstand und Rahmen zusätzlich zu dieser Größe gerechnet.

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

padding

padding ist transparenter Bereich innerhalb des Rahmens zwischen dem Inhalt und der Rahmenkante. Er gehört zum anklickbaren beziehungsweise mit dem Hintergrund bemalten Bereich des Elements.

<div class="card">Card content</div>

Langschreibweisen für padding

Jede Seite kann einzeln festgelegt werden:

<div class="element">Padded element</div>

margin

margin ist transparenter Bereich außerhalb des Rahmens. Er hält andere Elemente auf Abstand. Negative Außenabstände ziehen Elemente näher heran oder lassen sie überlappen.

<div class="section">Centered section with bottom margin</div>

Zusammenfallen von Außenabständen

Vertikale Außenabstände fallen zwischen benachbarten Blockelementen zusammen: Der tatsächliche Abstand entspricht dem größeren der beiden Außenabstände, nicht ihrer Summe. Horizontale Außenabstände fallen niemals zusammen.

<h2>Heading</h2>
<p>Paragraph below &mdash; margins collapse to 30px, not 50px.</p>

Zusammenfallen von Außenabständen verhindern

Das Zusammenfallen von Außenabständen wird verhindert, wenn:

  • Elemente Kinder eines Flex- oder Grid-Containers sind
  • ein übergeordnetes Element overflow: hidden besitzt
  • ein übergeordnetes Element zwischen sich und dem ersten Kind padding besitzt
  • ein Inline-Element die Geschwisterelemente voneinander trennt

auto-Außenabstände

Wenn Sie bei einem Blockelement mit fester Breite die horizontalen Außenabstände auf auto setzen, wird es innerhalb seines Containers zentriert. Dies ist die klassische Technik zum Zentrieren.

<div class="centered">Centered block, max 800px wide</div>

min-width max-width min-height max-height

Begrenzen Sie die Abmessungen durch minimale und maximale Werte, damit Elemente bei unterschiedlichen Bildschirmgrößen lesbar bleiben:

<div class="content">Readable content column capped at 65 characters wide.</div>

Gesamtgröße eines Elements berechnen

Im standardmäßigen content-box-Modell gilt: Gesamtbreite = width + padding-left + padding-right + border-left + border-right. Das kann überraschend sein und ist der Grund, warum border-box bevorzugt wird.

Logische Eigenschaften für margin und padding

Modernes CSS bietet logische Entsprechungen: margin-block, margin-inline, padding-block-start usw. Diese passen sich automatisch an die Schreibrichtung an.

<div class="card">Logical padding-block/inline</div>

Kurztest

Welche Ebenen sind im standardmäßigen Box-Modell in der gesamten dargestellten Breite eines Blockelements enthalten?

Zusammenfassung

Die Ebenen des Box-Modells sind Inhalt, Innenabstand, Rahmen und Außenabstand. Der Innenabstand liegt innerhalb des Rahmens, der Außenabstand außerhalb. Vertikale Außenabstände fallen zwischen benachbarten Geschwisterelementen zusammen. Verwenden Sie margin: 0 auto zusammen mit einer festen Breite, um Blockelemente zu zentrieren.

Häufig gestellte Fragen

Ist die Lektion „Breite, Höhe, Margin und Padding verstehen“ kostenlos?

Ja — der vollständige Text von „Breite, Höhe, Margin und Padding verstehen“ 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 „Breite, Höhe, Margin und Padding verstehen“?

Lernen Sie, wie width, height, margin und padding die Abmessungen und Abstände von Elementen festlegen. 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 1 von 4.

Wie lange dauert die Lektion „Breite, Höhe, Margin und Padding verstehen“?

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. Breite, Höhe, Margin und Padding verstehen
  2. Rahmenstile, -breite und -farbe
  3. Box-Sizing: Content-Box vs. Border-Box
  4. Outline und Box-Shadow
← Zurück zu CSS Academy