Question

所以我试图创建一些指向不同平台的链接，但是我认为图标之间的间距很大，我不知道如何减小它。这些都是同一div中的所有“ a”标签，其中包含以下样式：

body, html {
height: 100%;
background-color: #1d1d1d;
}

.link-div{
max-width: 1px;
position: absolute;
top: 10px;
margin-left: 10px;
}

这些是来自字体真棒站点的图标，如果重要的话，div也通过内联样式包含字体大小。更改字体大小将增加/减小图标本身的大小，但它们之间的相对距离将保持不变。除了几个过渡/转换，图标类没有其他单独的样式。

如果很重要，则结构如下所示：

<head>
<script src="https://kit.fontawesome.com/d32f88a9a9.js" crossorigin="anonymous">
</script>
</head>
<body>
  <div class="link-div" style="font-size: 32px;">
    <a href="link-to-where-we're-going"><i class="fab fa-twitch fa-fw"></i></a>
    <a href="link-to-where-we're-going" target="_blank"><i class="fab fa-facebook-square fa-fw"></i></a>
  </div>
</body>

图标的所有样式如下：

.fa-twitch{
transition-duration: 200ms;
transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
-o-transform: scale(1, 1);
color: #bc04fb;
}

.fa-twitch:hover{
transition-duration: 200ms;
transform: scale(1.5, 1.25);
-moz-transform: scale(1.5, 1.25);
-ms-transform: scale(1.5, 1.25);
-webkit-transform: scale(1.5, 1.25);
-o-transform: scale(1.5, 1.25);
}
.fa-facebook-square{
transition-duration: 200ms;
transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
-o-transform: scale(1, 1);
color: #bc04fb;
}

.fa-facebook-square:hover{
transition-duration: 200ms;
transform: scale(1.5, 1.25);
-moz-transform: scale(1.5, 1.25);
-ms-transform: scale(1.5, 1.25);
-webkit-transform: scale(1.5, 1.25);
-o-transform: scale(1.5, 1.25);
}

Answer 1

使用真实图标进行了编辑，因此您可以看到它的外观示例。我通常将列表用于图标列。

.link-div ul{
  list-style: none;
}

.link-div ul li {
  height: 50px;
  margin: 0;
  padding: 0;
}

.link-div ul li a{
  font-size: 50px;
  height: 50px;
  margin: 0;
  padding: 0;
}

<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<div class="link-div">
  <ul>
    <li><a href=""><i class="fab fa-twitter-square"></i></a></li>
    <li><a href=""><i class="fab fa-youtube-square"></i></a></li>
    <li><a href=""><i class="fab fa-instagram-square"></i></a></li>
  </ul>
</div>

Answer 2

问题出在class Pelican extends Bird implements Swimming { private final Swimming swimmer = new SwimmingImplemetation(this); @Override public void swim(boolean atSurface) { return swimmer.swim(atSurface); } }上-如果行高大于图标，则它将为图标分配更多空间，从而导致额外的空间。如果将line-height元素的行高设置为1em，则会删除空格：

在下面看到它的工作原理（我还使它们成为块元素，使其像您的图像一样垂直出现，并在图标上添加了边框，以便您可以看到没有空间）：

a { line-height: 1em; }

a { 
    line-height: 1em; 
    display: block;
}
.fa-twitch{
transition-duration: 200ms;
transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
-o-transform: scale(1, 1);
color: #bc04fb;
border:1px solid #aaa;
}
.fa-twitch:hover{
transition-duration: 200ms;
transform: scale(1.5, 1.25);
-moz-transform: scale(1.5, 1.25);
-ms-transform: scale(1.5, 1.25);
-webkit-transform: scale(1.5, 1.25);
-o-transform: scale(1.5, 1.25);
}
.fa-facebook-square{
transition-duration: 200ms;
transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
-o-transform: scale(1, 1);
color: #bc04fb;
border:1px solid #aaa;
}

.fa-facebook-square:hover{
transition-duration: 200ms;
transform: scale(1.5, 1.25);
-moz-transform: scale(1.5, 1.25);
-ms-transform: scale(1.5, 1.25);
-webkit-transform: scale(1.5, 1.25);
-o-transform: scale(1.5, 1.25);
}

Answer 3

尝试将其添加到CSS：

.link-div a {
    margin: 0
    padding: 0
}

它应该删除链接中的所有填充和边距。

如何删除div中链接之间的间距？

3 个答案: