Divs ohne Zwischenabstände

[Gunnar Bittersmann]

@@MrMurphy

Du wirst bislang mit ziemlich viel Theorie gefüttert. Deshalb habe ich mal einen Quelltext erstellt, der eine Beispiellösung für dein aktuelles Problem liefert.

Ein schlechtes Beispiel.

   /* Überschriften - font-family: 'Roboto Slab', Serif; */
   @import url(https://fonts.googleapis.com/css?family=Roboto+Slab);

   /* Fließtext - font-family: 'Roboto', Sans-Serif"; */
   @import url(https://fonts.googleapis.com/css?family=Roboto);

Nein! Webfonts hat man selbst zu hosten, nicht von der Datenkrake Google einzubinden; und schon gar nicht ohne vorige Zustimmung der Nutzer.

   @media all {

Wozu soll das gut sein?

      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;

Die Zeilenhöhe ist zu gering; sollte 1.4 oder 1.5 sein.

      h2, h3, h4, h5, h6 {
         font-family: 'Roboto Slab', serif;
         font-size: 1rem;

Die Überschriften aller Ebenen ab der zweiten gleich groß zu machen und damit jeglicher visueller Hierarchie zu berauben, ist auch keine gute Idee.

      a {
         /* darkblue */
         color: hsla(240, 100%, 27%, 1);

Warum die alte Schreibweise? Neu: hsl(240deg 100% 27% / 1). Wobei die Angabe voller Opazität überflüssig ist, / 1 kann weg.

         text-decoration: none;
         outline: none;

Ganz. Großer. Mist. Links müssen als solche erkennbar sein, also keinesfalls die Unterstreichung für alle Links entfernen! Die Unterstrichung kann man für Links im Navigationsmenü entfernen, aber nicht für alle.

Und auf gar keinen Fall outline entfernen, sonst ist die Seite mit Tastatur unbedienbar.

Bei Mausbedienung machen Browser übrigens schon seit einiger Zeit gar keine Fokusmarkierung mehr.

      figure {
         display: inline-block;

Alle Abbildungen generell zu Inline-Elementen zu machen, ist wohl auch keine gute Idee.

      img {
         min-width: 1px;
         display: block;
         max-width: 100%;

Da fehlt noch die Angabe height: auto. Ansonsten werden Bilder verzerrt, wenn die intrinsische Größe mit width- und height-Attribute angegeben ist (was man tun sollte).

   @media only screen and (min-width: 900px) {

Dass Breakpoints nicht in px, sondern in em angegeben werden sollten, sollte sich doch inzwischen herumgesprochen haben.

Jolan tru