Question

我无法弄清楚为什么右上角的导航图片与大照片之间存在空格。我已经尝试在所有相关元素上将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>

Answer 1

默认情况下，图片与baseline对齐，并且与inline元素的处理方式类似，因此底部有一些空格用于内联内容中的尾随字符。要删除它，请使用其他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>

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

1 个答案: