导航栏图片和图片之间的奇怪space

Question

我想不通为什么右上角的导航图片和大图之间有一个space。我已经尝试将所有相关元素的边距和填充设置为 0，但它仍然出现。我什至检查过我是否不小心在图片本身上放置了一个不可见的边框，但没有。我刚开始编码 html 和 css 所以我不太了解。它很小，但仍然很烦人。感谢您的帮助！

*{
padding:0;
margin:0;
}
body{
background-color:#242628;
}
.logo{
margin:0;
padding:0;
}
.logo img{
float:left;
margin-top:0.6%;
margin-left:1%;
margin-bottom:0;
width:280px;
height:75px;
}
.head{
padding:0;
margin:0;
}
.head ul{
float:right;
list-style-type:none;
padding:0;
margin:0;
}
.head ul img{
width:100px;
height:100px;
padding:0;
margin:0;
}
.head li{
float:left;
margin:0;
padding:0
}
.head ul a{
padding:0;
margin:0;
display:block;
}
.bakbild img{
padding:0;
margin:0
}

<!DOCTYPE html>
<html>
<head>

    <meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/gwfcss.css">
</head>

<body>
<div class="head">
    <div class="logo">
        <img src="bilder/logocube.png">
    </div>

    <ul>
        <li><a><img src="bilder/home.jpg"></a></li>     
        <li><a><img src="bilder/game.jpg"></a></li> 
        <li><a><img src="bilder/profil.jpg"></a></li>
    </ul>
</div>
<div class="bakbild">
    <img src="bilder/gamingsetup.jpg" style="width:100%;">
</div>
</body>
</html>

Answer 1

图像默认与 baseline 对齐，并且与 inline 元素的处理方式类似，因此内联内容中的尾随字符底部有一点 space。要删除它，请使用不同的 vertical-align 值。将 vertical-align: top 添加到那些 img 中。

*{
padding:0;
margin:0;
}
body{
background-color:#242628;
}
.logo{
margin:0;
padding:0;
}
.logo img{
float:left;
margin-top:0.6%;
margin-left:1%;
margin-bottom:0;
width:280px;
height:75px;
}
.head{
padding:0;
margin:0;
}
.head ul{
float:right;
list-style-type:none;
padding:0;
margin:0;
}
.head ul img{
width:100px;
height:100px;
padding:0;
margin:0;
vertical-align: top;
}
.head li{
float:left;
margin:0;
padding:0
}
.head ul a{
padding:0;
margin:0;
display:block;
}
.bakbild img{
padding:0;
margin:0
}

<!DOCTYPE html>
<html>
<head>

    <meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/gwfcss.css">
</head>

<body>
<div class="head">
    <div class="logo">
        <img src="http://kenwheeler.github.io/slick/img/lazyfonz3.png">
    </div>

    <ul>
        <li><a><img src="http://kenwheeler.github.io/slick/img/lazyfonz3.png"></a></li>     
        <li><a><img src="http://kenwheeler.github.io/slick/img/lazyfonz3.png"></a></li> 
        <li><a><img src="http://kenwheeler.github.io/slick/img/lazyfonz3.png"></a></li>
    </ul>
</div>
<div class="bakbild">
    <img src="http://kenwheeler.github.io/slick/img/lazyfonz3.png" style="width:100%;">
</div>
</body>
</html>

导航栏图片和图片之间的奇怪space

Weird space between navbar pictures and picture

html

css

space