导航栏未贴合浏览器顶部问题排查求助

这个间距问题其实是浏览器默认样式搞的鬼！大多数浏览器会给<ul>元素设置默认的外边距（比如margin-top: 1em），哪怕你已经给.nav>ul设置了padding，这个默认的margin仍然会把导航栏往下推，导致和顶部出现空隙。

修复方案 #

只需要给.nav>ul添加margin: 0;，覆盖浏览器的默认样式就行：

html, body { margin: 0; padding: 0; }
.nav>ul>li { 
    display: inline-block; 
    padding: 0px 25px 25px 25px; 
    color: #333333; 
    font-family: Georgia; 
    font-size: 14px; 
}
.nav>ul { 
    text-align: right; 
    list-style: none; 
    vertical-align: middle; 
    padding: 20px 0px 20px 0px; 
    margin: 0; /* 新增这一行，清除默认外边距 */
}
.nav { background-color: #cccccc; }

另外顺便提个小细节：你的HTML里有个语法错误——<link>标签的闭合写错了，把</script>改成</link>或者直接写成自闭合标签<link type="text/css" rel="stylesheet" href="Website.css" />，虽然这个不影响导航栏的间距，但规范的语法能避免潜在的问题～

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