Html 为什么在我的徽标和导航栏之间有一个巨大的可点击的间隙，以及如何消除它？

*{
框大小：边框框；
填充：0；
保证金：0；
}
保险商实验室{
列表样式类型：无；
}
.导航链接，
.标志{
文字装饰：无；
颜色：#000；
}
.标志{
最大宽度：80%；
宽度：20%；
身高：20%；
}
.导航条img{
宽度：10%；
高度：自动；
显示：直列块；
}
navbar先生{
填充：20px；
高度：50vh；
}
纳瓦尔先生，
保险商实验室{
显示器：flex；
弯曲方向：行；
}
ulli{
填充：0 5px；
}
.包装纸{
显示器：flex；
证明内容：之间的空间；
宽度：100%；
}

尝试将图像宽度更改为设定的像素量，而不是百分比，如下所示：

.navbar img{
宽度：50px；
}

为获得最佳效果，请按高度设置图像大小，例如：

img {
   height: 30px;
   width: auto;
}

---

查看工作小提琴

在我看来，您试图通过CSS文件中的logo名称来定位一个类，但当我查看您的HTML时，我没有看到class='logo'。

响应他在注释中的请求，这里是最后的代码片段：

*{
框大小：边框框；
填充：0；
保证金：0；
}
保险商实验室{
列表样式类型：无；
}
.导航链接，
.标志{
文字装饰：无；
颜色：#000；
}
.标志{
最大宽度：80%；
宽度：20%；
身高：20%；
}
.导航条img{
宽度：10%；
高度：自动；
显示：直列块；
}
navbar先生{
填充：20px；
高度：50vh；
}
纳瓦尔先生，
保险商实验室{
显示器：flex；
弯曲方向：行；
}
ulli{
填充：0 5px；
}
.包装纸{
显示器：flex；
证明内容：之间的空间；
宽度：100%；
}
.导航标志{
文字装饰：无；
颜色：#000；
左侧填充：10px；
}

您尝试在

谢谢，它缩小了间距，但即使我将宽度设置为1像素，间距仍然存在。你知道如何消除间距，以便我可以调整徽标和“主页”之间的空间吗？在主页中添加第二个类，并将其CSS设置为类似“左边距：10px”的值@johnnyrobertson当他在“导航栏”中引用“IMG”的所有标签时，他不需要引用徽标。出于某种原因，这在我的代码笔中有效，但在我的编辑器的实时服务器中无效。奇怪的是，它在编辑器的实时服务器中看起来如何？检查你的代码可能有额外的不必要的CSS，因为这一定是你没有相同结果的原因。

.navbar img {
  width: 100%;
  height: auto;
  display: in-line block;
}

.navbar a {
  width: 10%;
}