padding is not equal?-CodePudding

I'm trying to make a perfect circle on the font awesome icon when hovered with tailwindcss but the circle's height is too long so it looks like a vertical oval. I think the top and bottom padding is not equal as the left and right padding.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
      integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <i ></i>
  </body>
</html>

please try to use tailwindcss, no style tags.

CodePudding user response：

Just set manually the width and height of the icon:

<i ></i>

CodePudding user response：

<i> tag is an inline element. You can add space to the left and right on an inline element, but you cannot add height to the top or bottom padding or margin of an inline element. It's better to add a wrapper on tag and use padding on wrapper.