如何消除header与nav元素之间的间距？

问题分析 #

你遇到的间距问题主要来自两个原因：

• HTML结构不规范：<header>和<nav>被放在了<body>标签外部，不符合HTML标准，可能导致浏览器渲染异常。
• 列表默认外边距：<nav>内的<ul>元素自带默认margin-top，会与<nav>的外边距折叠，形成你看到的间距。

修复步骤 #

1. 修正HTML结构
   把<header>和<nav>移动到<body>标签内部，这是符合标准的基础操作：

<body>
    <header><h1>Green Pasture Stable and Training</h1></header>
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="board.html">Board</a></li>
            <li><a href="training.html">Training</a></li>
            <li><a href="contact.html">Contact Us</a></li>
        </ul>
    </nav>
    <!-- 页面其余内容保持不变 -->
</body>

2. 消除列表默认上外边距
   在CSS中给nav ul添加margin-top:0，覆盖浏览器默认的列表外边距：

nav ul {
    padding-left: 0;
    margin-top: 0; /* 新增该行，消除ul默认上外边距 */
}

补充说明 #

你之前设置的header { margin-bottom:0; }和h1 { margin-bottom:0; }是正确的，已经消除了<header>和内部<h1>的底部外边距，补充上述两步就能完全消除<nav>与<header>之间的间距。

内容的提问来源于stack exchange，提问作者SparkPixel