navbarの画像と画像の間の奇妙なスペース

なぜ右上のナビゲーション画像と大きな写真の間にスペースがあるのか分かりません。私は関連するすべての要素に余白とパディングを0にしてみましたが、それでも表示されます。私は偶然、絵に目に見えない境界線を置いたのかどうかを確認しましたが、そうではありません。私はちょうどhtmlとcssをコーディングし始めたので、あまり知らない。非常に小さいですが、それでも迷惑です。助けてくれてありがとう！navbarの画像と画像の間の奇妙なスペース

*{ 
 
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に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ようこそ！ –

navbarの画像と画像の間の奇妙なスペース

答えて

関連する問題