代码之家 › 专栏 › 技术社区 › Dorian Jones

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

space css html

Dorian Jones · 技术社区 · 7 年前

我不明白为什么右上角的导航图片和大照片之间有一个空格。我已经尝试将所有相关元素的边距和填充设置为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>

1 回复 | 直到 7 年前

Michael Coker 7 年前

图像对齐到 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>