Texte ausrichten

[Rolf B]

Hallo Jochen,

hast Du schon unseren Artikel über das Arbeiten mit dem Seiteninspektor gefunden? Der zeigt Dir, wie Du vorhandenen CSS Eigenschaften der HTML-Elemente anzeigen kannst.

In unserem Artikel über die Kaskade erklären wir, aus welchen Quellen der Browser Style-Informationen holt und wie sie priorisiert werden. Vor allem sind das: das User-Agent Stylesheet (oder Browser-Styles), das Autoren-Stylesheet (deine eigenen Styles) und style-Attribute im HTML.

Was bei dem p Element vielleicht verwirren kann, ist die Verwendung von Eigenschaftsnamen, die relativ neu sind:

Da steht margin-block-start und margin-block-end. Gemeint ist hier der Rand in "Block"-Richtung. Bei westlichen Schriften ist das die vertikale Achse, also margin-top und margin-bottom. Das ist etwas, was vor ein paar Jahren als „logische Eigenschaften“ (basierend auf der Schrift-Richtung, als Gegensatz zu physischen Eigenschaften, die auf dem Bildschirm basieren) eingeführt wurde. Unser Wiki weiß was dazu.

Wenn Du den Abstand, den der Browser um ein p Element macht, verringern willst, musst Du diese Ränder verändern.

Entweder so, mit den physischen Eigenschaften (nicht „physikalisch“, Matthias!):

margin: 0.5em 0;

oder mit Verwendung der logischen Eigenschaft:

margin-block: 0.5em;

Aber das reicht noch nicht. Der Inspektor zeigt, dass das ul Element ebenfalls ein margin-block von 1em hat. Wenn ul und p aufeinander folgen, ohne dass weitere Elemente im Spiel sind, dann verschmelzen der untere Rand des ul und der obere Rand des p, d.h. zwischen oberer Liste und p Element ist 1em Abstand, selbst dann, wenn Du den margin des p auf 0 setzt. Du musst den Block-Margin des ul ebenfalls reduzieren.

Das Einrückung des p unter die Punkte ist nicht schön machbar. Der Inspektor zeigt ein padding-inline-start (=padding-left) von 40px für das ul Element, aber das ist die Einrückung für den Text der li Elemente. Die Punkte befinden sind im Padding-Bereich. Diese Punkte kann man mit dem ::marker-Pseudoelement zwar etwas beeinflussen, aber nur in geringem Maße. Das ist wirklich ärgerlich, denn so hast Du keine Möglichkeit, genau anzugeben, wo die Punkte sind und du hast auch keine Information, wo sie genau sind.

Natürlich kannst Du dem p-Element per try-and-error einen margin-left geben, der für Dich gut aussieht. Aber möglicherweise kommt dann ein anderer Font oder eine andere Skalierung vorbei und es passt wieder nicht mehr. Damit musst Du leben.

Rolf