Trying to make a perfect circle span

[WebSteve]

I’m using the following CSS to make the Registered symbol, but the circle desired is displayed as a tall oval:

<span style="margin-left: 1px; border: 1px solid black; border-radius: 8px; width: 16px; height: 16px; padding: 0 4px;"><span style="font-size: 10px;">R</span></span>

I tried many permutations and can’t get the height to be equal to the width.

margin-left: 1px; is to put a space between the symbol and the last letter at left.
padding: 0 4px; is to center the R inside the span.
< span>< span> is used to keep the symbol and R inline.

How do I make the R inside of a circle? (I’m aware of the ® code to generate the symbol. I’m not using it for this application.)

[PaulOB]

@WebSteve

R

Spans are inline elements and therefore width and height don’t apply. You have also added padding so it would not be a circle even if the width and height took effect. Also the border-radius needs to be 50% to make a perfect circle.

Try this:

<span style="margin-left: 1px; border: 1px solid black; border-radius: 50%; width: 16px; height: 16px;display:inline-flex;justify-content:center;align-items:center"><span style="font-size: 10px;">R</span></span>

Of course the styles should be on the stylesheet and not the html but that goes without saying

[WebSteve]

@PaulOB

R

This is golden! Thanks for the added insights!