ナビゲーションバーの上にある空白を削除するにはどうすればよいですか？

Question

ナビゲーションバーに上の枠線がないようにしたいのですが、余白を0pxに設定しても少しのスペースしかありません。

どうすればそのスペースを削除できますか？

コード：

#navigationBar { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
li { 
 
    display: inline; 
 
    float: left; 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    margin: 0px; 
 
    text-decoration: none; 
 
} 
 

 
.active { 
 
    background-color: #999999; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    margin: 0px; 
 
    text-decoration: none; 
 
}

<nav> 
 
    <ul id="navigationBar"> 
 
    <li class="active">Site1</li> 
 
    <li>Site2</li> 
 
    <li>Site3</li> 
 
    <li>Site4</li> 
 
    <li>Site5</li> 
 
    </ul> 
 
</nav>

Answer 1

あなたは身体とhtmlのデフォルトのマージンを削除していません。これを追加します。

html,body{margin:0} 

body,html{margin:0} 
 
#navigationBar { 
 
     margin: 0px; 
 
     padding: 0px; 
 
     overflow: hidden; 
 
     background-color: #333; 
 
    } 
 

 
    li { 
 
     display: inline; 
 
     float: left; 
 
      display: block; 
 
     color: white; 
 
     text-align: center; 
 
     padding: 14px 16px; 
 
     margin: 0px; 
 
     text-decoration: none; 
 
    } 
 

 
    .active { 
 
     background-color: #999999; 
 
    } 
 

 
    li a { 
 
     display: block; 
 
     color: white; 
 
     text-align: center; 
 
     padding: 14px 16px; 
 
     margin: 0px; 
 
     text-decoration: none; 
 
     
 
     }

<nav> 
 
    <ul id="navigationBar"> 
 
     <li class="active">Site1</li> 
 
     <li>Site2</li> 
 
     <li>Site3</li> 
 
     <li>Site4</li> 
 
     <li>Site5</li> 
 
    </ul> 
 
</nav>

Answer 2

は、CSSをリセットエリック・マイヤーズとなど、すべて事前に設定した余白をリセットして、デフォルトの余白を削除します。