viereck in div container

[Rolf B]

Hallo Konni,

die Eigenschaft white-padding gibt es nicht. Du meinst padding. Deswegen wird vermutlich ein vorhandenes Padding greifen und 8px mehr haben.

Solche Dinge findest Du mit den Entwicklerwerkzeugen deines Browsers heraus, die zeigen Dir für jedes Element, welche Style-Regeln gelten, welche nicht verstanden werden und wie die vom Browser berechneten Maße für eine Box sind.

Beachte: es sollte ::after heißen, nicht :after. Der einfache Doppelpunkt kommt aus CSS2, selbst im Update CSS 2.2 steht das noch so, und darum versteht dein Browser das :after auch, aber die seit 20 Jahren entstehende CSS3 Spezifikation verlangt ::after und ::before. Der Grund ist, dass es Pseudoklassen (:hover, :focus, :nth-child, etc) gibt, die ein vorhandenes Element auswählen, und Pseudoelemente (::after, ::before, ::first-letter, ::selection, etc), die so tun, als würden sie dem Dokument ein Element hinzufügen (auch wenn sie es nicht wirklich machen). Man möchte zwischen beiden sauber unterscheiden. Selbst eine tote Altlast wie Internet Explorer 9 versteht die CSS3-Schreibweise, es gibt also keinen Grund, bei :after zu bleiben.

Und hast Du gesehen, dass ich in meinem Beispiel nicht px für die Fontsize verwendet habe, sondern em? Der Browser legt eine Standardschriftgröße für den Text in deiner Seite fest. Normalerweise sind das 16px, aber das kann sich je nach Gerät oder Browser ändern, und auch, wenn ein Anwender die Textgröße ändert. Wenn Du Deine Schriftgröße auf 15px festnagelst, folgt deine Seite nicht mehr den Schriftgrößen-Einstellungen des Anwenders. Mit em schon. Die Größenangabe "1em" bedeutet: Die in diesem Element geltende Schrifthöhe. Ohne eigene font-size Angabe ist es die Schrifthöhe des Elternelements. D.h. wenn Du in einem Container die font-size auf 2em festlegst, verändert sich die Bezugsgröße für alle font-size Angaben in diesem Container.

Es ist hilfreich, auch Paddings und Margins in em festzulegen. Wenn jemand die Schriftgröße ändert, ist es besser, wenn sich auch Abstände anpassen.

Lange Rede, kurzer Sinn:

.title {
   font-size: 0.9em; padding: 0.7em;
}

kommt deinen Pixelangaben relativ nahe, und dies sollte der passende Stil für das ::after-Element sein:

.title::after {
   height: 2.3em; 
   width: 2.3em;
}

Rolf