M101 - Webauftritt erstellen und veröffentlichen
  • Intro
    • 🗓️Organisatorisches
  • Tag 1
    • 01 Geschichte des Internets
    • 02 Realisation
    • 03 HTML
      • Grundlagen
      • Spezielle Tags
      • Tabellen & Listen
      • HTML Dokument
      • HTML Validierung
      • 🛠️Aufgabe Rechnung erstellen
    • 04 CSS
      • Grundlagen: Selektoren und Einbindung
      • CSS Boxmodell
      • CSS Validierung
      • 🛠️Aufgabe Rechnung gestalten
      • CSS Kaskadierung
      • Pseudoklassen
  • Tag 2
    • 01 Dokumentenstruktur
    • 02 Ordnerstruktur
    • 03 Bilder
    • 04 Gestaltung: Schriften, Farben, Einheiten
      • Schriftarten
      • Farben
      • Einheiten
    • 05 Inline und Block
    • 06 Flexbox
      • Konzept
      • Der Flex-Container
      • Die Flex-Items
      • 🛠️Aufgaben
        • Aufgabe Boxen
        • Aufgabe Newsportal
      • Weiterführende Links
    • 07 Exkurs: Usability
    • 08 Formulare
      • Formulare
      • Informationsgruppierung
      • Design- und Strukturgrundlagen
      • 🛠️Aufgabe Formulare
  • Tag 3
    • 01 CSS Grids
      • Konzept
      • Definition
      • Platzierung
      • 🛠️Grid Aufgabe
      • Grids vs. Flexbox
      • 🛠️Grids vs. Flexbox Aufgabe
      • Weiterführende Links
    • 02 Responsive Design
      • Media Queries
      • Responsive Design
      • 🛠️Aufgabe
    • 🛠️Testing-Workshop
    • 03 Konzeptionierung
    • 04 Veröffentlichen
    • Projektarbeit
Powered by GitBook
On this page
  • Innenabstand (padding)
  • Rahmen (border)
  • Aussenabstand (margin)

Was this helpful?

  1. Tag 1
  2. 04 CSS

CSS Boxmodell

PreviousGrundlagen: Selektoren und EinbindungNextCSS Validierung

Last updated 1 year ago

Was this helpful?

Wie dir bei HTML- und CSS-Code vielleicht bereits aufgefallen ist, geht es oft darum Boxen zu erstellen (HTML) und Boxen zu gestalten (CSS). Die meisten HTML-Elemente sind somit Boxen oder Schachteln, welche übereinander gestapelt wurden.

CSS ist nun dafür da, deren Grösse, Farben, Position usw. zu bestimmen.

Das CSS-Layout basiert auf dem Box-Modell. Jede Box, die Platz auf einer Webseite einnimmt, hat folgende Eigenschaften:

Innenabstand (padding)

Das Padding ist der Raum zwischen Inhalt und Rahmen eines Elements.

Rahmen (border)

Der Border ist der Rahmen um ein Element.

Aussenabstand (margin)

Der Abstand vom Border bis zum nächsten benachbarten Element.

boxmodell-gif
Boxmodell