我正尝试删除头部中不需要的空间
我正试图在导航栏中删除这个不需要的空间。 我尝试删除填充，边距和边框，其中没有一个解决了问题。 这是我的CSS：
.nav {
list-style: none;
font-family: 'Oleo Script', cursive;
display: inline;
margin: 0;
padding-top: 100px;
padding-bottom: 0px;
float: right;
}
.header {
background-color: rgba(0, 0, 0, .7);
position: fixed;
top: 0;
padding-bottom: 0;
margin: 0;
width: 100%;
}<div class=header>
<a href="index.html">
<img src="https://lh4.googleusercontent.com/-IqHfCyPGn00/AAAAAAAAAAI/AAAAAAAAAA8/WsxciIskxSo/photo.jpg?sz=328" alt="Logo.png" style="height:150px; width:150px; border-bottom: 0px;">
</a>
</div> “img”元素是一个“内联”元素，它只是一个其他字母，如“n”，“h”或....“ p ”。 它们具有“降序”部分，内联元素的定位是“基线”（“n”的底部所在的位置）...因此，您在图像下看到的不是边距或填充，而是用于降序字符p，g，j的部分...可以将显示更改为阻止，如其他答案所示，或者简单地设置vertical-align:bottom 。
内联元素的默认vertical-align值是baseline ，这是display:block正在工作的原因......它不在行内容中！
如果行中没有其他内容， line-height: 0也适用于你。
你的内联图像有一些额外的余量。 给它display: block和border: 0 。 它会解决你的问题。
.header a img{
border:0;
display:block;
}
试试这个，并添加这个CSS：
.header a {
display: block;
width: 150px;
height: 150px;
}
.header img{
height: auto;
width: auto;
max-width: 100%;
max-height: 100%;
}
.nav {
list-style: none;
font-family: 'Oleo Script', cursive;
display: inline;
margin: 0;
padding-top: 100px;
padding-bottom: 0px;
float: right;
}
.header {
background-color: rgba(0, 0, 0, .7);
position: fixed;
top: 0;
padding-bottom: 0;
margin: 0;
width: 100%;
}
.header a {
display: block;
width: 150px;
height: 150px;
}
.header img{
height: auto;
width: auto;
max-width: 100%;
max-height: 100%;
}<div class=header>
<a href="index.html">
<img src="https://lh4.googleusercontent.com/-IqHfCyPGn00/AAAAAAAAAAI/AAAAAAAAAA8/WsxciIskxSo/photo.jpg?sz=328" alt="Logo.png" style="height:150px; width:150px; border-bottom: 0px;">
</a>
</div>