導航欄圖片和圖片之間的奇怪空間

我想不通爲什麼在右上角的導航圖片和大圖片之間有一個空格。我曾嘗試在所有相關元素上將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>

來源

2017-07-02 Dorian Jones

圖像默認對齊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>

來源

2017-07-02 19:17:55

非常感謝您！ –

@DorianJones不客氣！ –

導航欄圖片和圖片之間的奇怪空間

回答

相關問題