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

问题描述：

我想不通为什么在右上角的导航图片和大图片之间有一个空格。我曾尝试在所有相关元素上将margin和padding设置为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>

答

图像默认对齐baseline和类似处理，以inline元素，所以有在底部用于内联内容的末尾加一小的空间。要将其删除，请使用不同的vertical-align值。 img s增加了vertical-align: top。

*{ 
 
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>

非常感谢您！ –

@DorianJones不客气！ –

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

相关推荐