如何摆脱导航栏和图片之间的空间？

Question

我不知道如何从我的导航栏和图片中删除这个空间..

我的导航栏和图像的 CSS 代码是：

a {
    text-decoration: none;
    color: white;
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 0;
}

a:hover {
    color: black;
}

header {
    background-color: #C0C0C0;
    margin: 3px 60px 0;
}

li {
    display: inline;
    border-right: 1px solid black;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

nav {
    position: relative;
    text-align: center;
}

ul {
    list-style-type: none;
}

#bikebanner {
    position: relative;
    left: 65px;
}

#bikebanner 是图像 ID。

html 是这样的：

<header>
    <img src="images/bicyclebanner.jpg" id="bikebanner" alt="People riding bikes." title="Biking">
    <h1 id="pagetitle"><a href="Lab04.html">Cycling Tours</a></h1>
    <nav>
        <ul>
            <li><a href="aboutUs.html">About Us</a></li>
            <li><a href="#askUs">Ask Us</a></li>
            <li><a href="#destinations">Destinations</a></li>
            <li><a href="#faq">FAQ</a></li>
            <li><a href="#reviews">Reviews</a></li>
            <li><a href="#seminars">Seminars</a></li>
            <li><a href="#tripPrep">Trip Prep</a></li>
        </ul>
    </nav>
</header>

寻找一种通用的搭配，因为我还有其他东西，它们之间也有空白。

谢谢。

Answer 1

尝试将其添加到您的 css 中：

img{
 display:block;
}

img 是 inline-block 类型，它增加了一些难以找到的空间。

将其设置为阻止应该可以修复它。