CSS und die Boxen

Entwicklerwerkzeuge im Browser

Bisher haben wir einzelne Elemente von Webseiten gestaltet. Hier untersuchen wir die Beziehung der Elemente untereinander:

Mozilla Firefox: Drücke Strg + Umschalt + C

Google Chrome: Drücke Strg + Umschalt + C

Es öffnen sich am unteren Rand des Browsers die Entwicklerwerkzeuge.

In den Entwicklerwerkzeugen kannst du einen Blick hinter die Kulissen werfen und die Webseite für dich verändern.

Aufgabe

Fahre über verschiedene Bereiche der Webseite.

Du wirst feststellen, dass diese in farbige Kästen getaucht werden. Diese dienen dazu, dir bei der Orientierung zu helfen.

Aufgabe

Fahre nun mit der Maus über diesen Textabschnitt.

Auch dieser Textabschnitt erscheint in einer Box. Das liegt daran, dass der Browser alle Elemente einer Webseite in einzelne Boxen einsortiert. Diese Boxen können verschieden angeordnet werden.

Abstände von Boxen

Aufgabe

Verwende die Elementuntersuchenfunktion für die vorliegende Webseite.

Aufgabe

Fahre mit der Maus über die div mit Innenabstand.

div mit Innenabstand

div mit Außenabstand

div mit Innen- und Außenabstand

Mozilla Firefox 53: Im unteren Bereich unten Rechts findest du nach dem Aktivieren des Tabs „Berechnet“ ein Modell der Box:

Google Chrome 58:

Im unteren rechten Bereich findest du ein Modell der Box:

Aufgabe

Ermittle die Bedeutung der CSS-Attribute margin, padding und border.

Details

Ein Englischwörterbuch oder die ausführliche Dokumentation helfen dir notfalls weiter.

Experten: Verändere die CSS-Attribute der gegebenen Boxen mit dem Entwicklerwerkzeug.

Zusammenfallende Außenabstände

Aufgabe

Lies dir den Abschnitt collapsing margins von wiki.selfhtml.org durch.

Aufgabe

Notiere dir kurz, was collapsing margins sind.

info> Ausführliche Dokumentation: https://wiki.selfhtml.org/wiki/CSS/Box-Modell