CSS: Move “border-radius 50%”-Circle up by 2px?

Question

I have the following Round Icon, which I style with styled-components :

const RoundIcon = styled.span`
  height: 10px;
  width: 10px;
  border-radius: 50%;
  display: inline-block;
  background-color: blue;
`

And I display this round icon center-aligned next to some text, like so:

<Box>
  <RoundIcon />
  <p style={{ display: 'inline-block', marginLeft: '10px' }}>Hello</p>
</Box>

I like this, but I'd like to move the icon up a pixel or two now. I'm not sure how to do this though without moving the text next to it?

Answer 1

add to your RoundIcon definition transform: translateY(-2px);