≡

Border und Boxen-Typ

Juni 2024

Gleiches Aussehen ist nicht dasselbe

Screenshot

Nanu, ist das nicht dasselbe wie im Beitrag Shapes mit Abstand?
Wieder fließt Text an einem Kreis vorbei, aber die Lösung ist eine andere.

Das Beispiel hier anschauen.

Betrachten wir zuerst den Code. Den HTML-Code ist derselbe wir im Beispiel zuvor, aber bei CSS ist einiges anders.

CSS

div.myshape { 
  width: 140pt;
  height: 140pt;
  background-color: #C8C87E;
  float: left;

  margin-right: 6pt;
  shape-outside: margin-box;
  border-radius: 50%;
}

Die Box wird hier zum Kreis durch den gewählen Borderradius. Bei 50% der Breite (und Höhe) treffen sich die Eck-Rundungen und der Kreis ist perfekt.

Für den Abstand des Textes ist auch hier shape-outside zuständig. Aber es reicht der Hinweis margin-box, damit der Text am shapeeigenen Abstand vorbeifließt. Eine Anpassung des Abstands mit shape-margin wie im Beispiel zuvor ist hier nicht zielführend, aber unser Shape bekommt mit margin-right rechtsseitig einen definierten Abstand verpasst.

Wir lernen, dass mit border-radius nicht nur der Rahmen (border) gebogen wird, sondern auch der Abstand (margin).

Dokumente

Eine ausführliche Darstellung und welche Spezifikationen es dazu gibt finden wir beim MDN im Beitrag CSS shapes.