html - CSS查询( margin 或填充？)

我希望将li元素粘贴到页眉-容器边框元素，而不是页面顶部。

基本上，删除li元素和标头容器边界之间的白色间隙，然后将间隙留在页面顶部。

我尝试使用边距，增加填充...不起作用。

请参阅下面的CSS截图：

nav ul {
margin: 0;
padding: 0;

}

nav a {
    display: block;
    padding: 15px 0;
    font-size: 17px;

    text-align: center;
    text-decoration: none;
    font-weight: bold;

    color: #000000;
    background: #f3f2f2;
}

要求的HTML代码：

<div class="header-container">
            <header class="wrapper clearfix">
                <h1 class="title"><img src="img/mimosa.png" alt="logo"></h1>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="lodging.html">Lodging</a></li>
                        <li><a href="tinfo.html">Tourist Info</a></li>
                    </ul>
                </nav>
            </header>
        </div>

最佳答案

感谢小提琴，这有所帮助
好，问题是由于您的图片与导航仪位于同一水平区域
图片大小推高了链接。
解决此问题的快速方法是添加此

.title{
    position:relative;
    top:10px;
    left:40px;
}

只需根据需要调整顶部和左侧。
并仔细检查移动设置。如果您将最小宽度设置为很多，则可能需要将其定位不同

关于html - CSS查询( margin 或填充？)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21708632/