Reset und ausführliche Restaurierung: kalibrierung.css

Alle Browser haben ein eingebautes Stylesheet und eine ziemlich nervige Sache beim Umgang mit CSS ist, dass die Browser für padding und margin zum Teil sehr unterschiedliche Standardvorgaben haben. Um nicht jedes Mal wieder auf Fehlersuche gehen zu müssen, greifen viele Webdesigner zu einer auf den ersten Blick radikalen Maßnahme, die sich aber bewährt hat:

• padding und margin werden für alle HTML-Elemente auf 0 (Null) gesetzt.

Dieses Zurücksetzen ("Reset") der Innen- und Außenabstände für alle Elemente zu Beginn überstimmt die unterschiedlichen Browsereinstellungen. Anschließend müssen für die Abstände der wichtigsten HTML-Elemente sinnvolle Werte definiert werden.

Der Reset und die Restaurierung der Abstände werden in einem Stylesheet namens kalibrierung.css gespeichert, das Sie seinem Namen entsprechend auch als Fundament für andere Projekte verwenden können.

Erstellen Sie zunächst eine leere Datei und speichern Sie sie unter dem Namen kalibrierung.css im Übungsordner. Erstellen Sie am Anfang dieser Datei folgenden Quelltext:

/*  ====================================================
Stylesheet mit Reset und Restaurierung der Abstände für alle Elemente
Datei:  kalibrierung.css 
Datum:  ...
Autor:  ...
========================================================== */

@media all { 

/* ==============================================
   TEIL I - Reset
   ============================================== */

* { padding: 0; margin: 0; }


} /* Ende @media - nicht löschen! */

/* ======================================
   E N D E kalibrierung.css
   ====================================== */

Falls Sie ein solches Reset das erste Mal verwenden, betrachten Sie die Webseiten mal im Browser - aber erschrecken Sie nicht. Es sind tatsächlich alle Innen- und Außenabstände für alle Elemente auf null gesetzt worden, was zunächst ziemlich seltsam aussieht: