自动添加保证金 - 它来自哪里？

Question

正如您在下图所示，我创建了一个带有用户导航图标的菜单。

您可能已经发现它，元素之间存在少许不必要的边距。

框本身由以下CSS生成。

background-color: hsla(0, 0%, 30%, 0.30);
border-radius: 5px;
height: 45px;

每个图标都有自己的CSS类。

.userIcon,
.loginIcon,
.logoutIcon,
.registerIcon,
.settingsIcon
{
    border-right: 1px solid hsl(0, 0%, 30%);
    display: inline-block;
    height: 45px;
    width: 45px;
}

.userIcon
{
    background: url(user.svg) no-repeat center;
    background-size: 30px;
}

.loginIcon
{
    background: url(login.svg) no-repeat center;
    background-size: 30px;
}

/* ... other icons ... */

该框具有以下HTML标记。

<div class="usermenu">
  <a href="/user" class="userIcon"></a>
  <a href="/settings" class="settingsIcon"></a>
  <a href="/login" class="loginIcon"></a>
</div>

我目前不知道这个边距来自何处，也不知道如何修复它。有什么想法吗？

Answer 1

您的元素以内联块显示;它们是内嵌元素。内联元素之间可以有空格，这就是元素之间的空白区域。这个空间就是你所认为的边缘。

JSFiddle

您可以注释掉空白区域（或完全删除它）以克服这个问题：

<div class="usermenu">
    <a href="/user" class="userIcon"></a><!--
 --><a href="/settings" class="settingsIcon"></a><!--
 --><a href="/login" class="loginIcon"></a>
</div>

JSFiddle

另一种丢失额外空间而不必使用注释混淆标记的方法是将父元素的字体大小更改为0，然后再次为您的锚点设置它，以便它不被继承：< / p>

.usermenu{
    font-size: 0;
}
.userIcon,
.loginIcon,
.logoutIcon,
.registerIcon,
.settingsIcon
{
    border-right: 1px solid hsl(0, 0%, 30%);
    display: inline-block;
    background:#f00;
    height: 45px;
    width: 45px;
    font-size: 16px;
}

JSFiddle

Answer 2

这是因为浏览器将display: inline-block的元素解释为需要空格的“单词”类型对象。两种常见的解决方案是：

1. 在内联块元素上使用margin-right: -5px。

2. 在内联块元素之间使用注释：

   <a href="#">inline-block</a><!-- --><a href="#">inline-block</a>

3. 使用float: right或float: left代替内联阻止。

Answer 3

这里有两个选项，但是＆＃34;边距＆＃34;实际上是HTML中的空格。当你将它们设置为display:inline-block;时，你也会让浏览器认为a标签之间的实际空格应该是空格。

您可以将HTML更改为：

<div class="usermenu">
  <a href="/user" class="userIcon""></a><a href="/settings" class="settingsIcon"></a><a href="/login" class="loginIcon"></a>
</div>

哪个会摆脱边缘。

您也可以更改以下CSS以使用float:left代替display:inline-block;

.usericon, .loginicon, .logouticon, .registericon, .settingsicon {
  border-right: 1px solid hsl(0, 0%, 30%);
  display: inline-block;
  float: left;
  height:45px;
  width: 45px;
}

如果您这样做，您可能还需要在包含div上实现某种类型的clearfix，但如果您更喜欢更清晰的代码，则它是另一种选择。