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

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

您可能已经发现了它，元素之间有一个不需要的小边距

长方体本身由以下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>

---

我目前不知道这个利润来自何处，也不知道如何弥补。有什么想法吗？

您的元素以内联块的形式显示；它们是内联元素。内联元素之间可以有空格，这就是元素之间的空白。这个空间就是你认为的边缘

您可以注释掉空白（或完全删除空白）以克服此问题：

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

---

之所以会发生这种情况，是因为浏览器将带有

display:inline block

的元素解释为需要空格的“word”类型的对象。两种常见的解决方案是：

在内联块元素上使用

右边距：-5px

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

使用

float:right

或

float:left

代替内联块

---

这里有两个选项，但“边距”实际上是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>

---

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

CSS的结局在哪里？在css文件中或直接在元素上？正如您所知。由于标记中的语法错误，可能无法应用某个类。class=“userIcon”空白将是常规空白，而不是不间断的空白

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

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