Mit outline (CSS-Eigenschaft) Layout-Fehler finden

30. September 2020

Manchmal sieht man das <div> vor lauter <html> nicht mehr. Abhilfe schafft eine CSS-Eigenschaft namens „outline“. Diese kann so ziemlich allen HTML-Tags zugeordnet werden, was aus einem Layout-Dschungel eine leicht nachvollziehbare Übersicht machen kann. Fehler im Layout können damit schnell aufgespürt werden, eine Anpassung des Layouts mit diesem visuellen Hilfsmittel ist bedeutend einfacher als ohne.

So sieht es aus, wenn die outline-Eigenschaft bei allen HTML-Elementen aktiv ist:

So kannst du es in Chrome und Browsern, die auf Chromium basieren, testen:

  • F12 → Developer Tools ausklappen
  • Unter „Elements“ einen neuen Style hinzufügen:
    * { outline: 1px solid red; }

Um den outline-Trick temporär aktiviert zu lassen, kannst du in deiner CSS-Datei den obigen Code ergänzen, am besten zu Beginn der Datei.