display: inline-block;을 사용하면 메뉴 버튼 사이에 미세한 공백이 생깁니다. 공백을 제거하려면 display: inline-block; 대신 ‘왼쪽부터 차곡차곡 태그를 배치하겠다’는 의미인 float: left;을 입력합니다.

예제 소스 Exercise/11장/1_navigation/style.css

li {
    float: left;
    width: 100px;
    height: 50px;
    background-color: yellow;
    border: solid 5px red;
    text-align: center;
    line-height: 50px;
}

그림 11-6 float: left를 적용한 결과