填充不相等？

发布于 2025-01-19 12:41:06 字数 1005 浏览 2 评论 0原文

当悬停在尾windcss的情况下时，我正在尝试在字体上的Awesome Icon上制作A Perfect 圆圈，但是圆的高度太长了，因此看起来像垂直的椭圆形。我认为顶部和底部的填充不等于左右填充。

<!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 class="hover:bg-gray-300 hover:rounded-full p-2 fa-solid fa-close"></i>
  </body>
</html>

请尝试使用parwindcss，没有样式标签。

原文

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 class="hover:bg-gray-300 hover:rounded-full p-2 fa-solid fa-close"></i>
  </body>
</html>

please try to use tailwindcss, no style tags.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

絕版丫頭 2025-01-26 12:41:06

只需手动设置图标的width和高度：

<i class="w-8 h-8 hover:bg-gray-300 hover:rounded-full p-2 fa-solid fa-close"></i>

Just set manually the width and height of the icon:

<i class="w-8 h-8 hover:bg-gray-300 hover:rounded-full p-2 fa-solid fa-close"></i>

回复收藏 0 原文

强者自强 2025-01-26 12:41:06

标签是一个内联元素。您可以向内联元素的左侧和右侧添加空间，但不能向内联元素的顶部或底部内边距或边距添加高度。最好在标签上添加包装器并在包装器上使用填充。

回复收藏 0 原文

静谧 2025-01-26 12:41:06

您可以添加一个div-wrapper并相应地更改对齐方式。请参阅以下实施。

您可以使用任何图标更改 ico 。

<script src="https://cdn.tailwindcss.com"></script>
<div class="w-20 h-20 p-7 m-5 hover:bg-gray-300 hover:rounded-full fa-solid fa-close bg-lime-300 rounded-full">
<i >ico</i>
</div>

You can add a div-wrapper and change the alignment accordingly. Please see the below implementation.

You can change the ico with any icon.

<script src="https://cdn.tailwindcss.com"></script>
<div class="w-20 h-20 p-7 m-5 hover:bg-gray-300 hover:rounded-full fa-solid fa-close bg-lime-300 rounded-full">
<i >ico</i>
</div>

回复收藏 0 原文

~没有更多了~