내 탐색 막대 위에있는 공백을 제거하려면 어떻게합니까?

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를 재설정 에릭 마이어스에 등 모든 사전 설정의 여백을 재설정하고 기본 여백을 제거합니다.