수직 탐색 막대 왼쪽의 공백

수직 탐색 막대의 왼쪽에있는 공백을 제거하는 데 어려움이 있습니다.수직 탐색 막대 왼쪽의 공백

내 메인 바에서 왼쪽으로 패딩 설정을 시도했습니다.

처음으로 내비게이션 막대를 만드는 것이므로 내 코드에 의미 상으로는 잘못된 점이 있으면 알려 주시기 바랍니다.

감사합니다.

이것은 HTML 코드입니다.

<title>Mockup of Zopim</title> 
<body> 
    <main> 
     <nav class = "side-bar"> 
      <ul class ="main-bar"> 
       <li class="user-nav"><a class ="big-box" href="#">User</a></li> 
       <li class="main-nav"><a href="#">Home</a></li> 
       <li class="main-nav"><a href="#">Visitor List</a></li> 
       <li class="main-nav"><a href="#">Visualization</a></li> 
       <li class="main-nav"><a href="#">History</a></li> 
       <li class="divider-nav"><a href="#">Manage</a></li> 
       <li class="manage-nav"><a href="#">Agents</a></li> 
       <li class="manage-nav"><a href="#">Departments</a></li> 
       <li class="manage-nav"><a href="#">Shortcuts</a></li> 
       <li class="manage-nav"><a href="#">Banned Visitors</a></li> 
       <li class="manage-nav"><a href="#">Triggers</a></li> 
       <li class="divider-nav"><a href="#">Settings</a></li> 
       <li class="settings-nav"><a href="#">Widgets</a></li> 
       <li class="settings-nav"><a href="#">Personal</a></li> 
       <li class="settings-nav"><a href="#">Accounts</a></li> 
      </ul> 
     </nav> 
     <article> 
     <header> 
      <h1>Hello!</h1> 
     </header> 
     </article> 
    </main> 
</body>

이것은 CSS 코드입니다.

@charset "utf-8"; 
/* CSS Document */ 
body { 
    background-color: black; 
} 
main { 
    width: 100%; 
} 
.side-bar { 
    width: 15%; 
    height: 100%; 
    background-color: #585858; 
    position: relative; 
    float: left; 
} 
nav li { 
    list-style: none; 
} 
.main-bar { 
    padding-left: 0px; 
} 
.main-bar li a { 
    display: block; 
    width: 100%; 
    height: 100%; 
    line-height: 2.5em; 
    text-decoration: none; 
    color: white; 
    text-align: center; 
} 
article { 
    width: 60%; 
    height: 30%; 
    float: right; 
    position: relative; 
} 
a.big-box { 
    display: block; 
    line-height: 7em; 
} 
header h1 { 
    color: white; 
}

다음은 JSfiddle 링크입니다.

http://jsfiddle.net/codermax/fe0L3d08/

출처

2014-08-30 codemax

에 샘플을 설정하고 몸 마진, 패딩 업데이트되었습니다. 그래서 이것을 해결하는 가장 좋은 방법은 모든 여백과 패딩을 설정하는 것입니다.

*{ 
    margin:0; 
    padding:0; 
} 

or 
html,body { 
    margin:0; 
    padding:0; 
}

또한 CSS를 재설정하면 사용할 수 있습니다. 다음과 같이하십시오 :

http://necolas.github.io/normalize.css/

출처

2014-08-30 02:08:08 Bipon

감사합니다! 그것은 작동합니다! – codemax

CSS 링크 정상화에 감사드립니다! – codemax

당신은 다른 브라우저의 단점을 해결하기 reset.css를 사용하는 것이 좋습니다. 나는 대부분의 웹 브라우저는 기본 마진과 패딩 다른 기본 설정이 0

body { 
    margin:0; 
    padding:0; 
}

http://jsfiddle.net/fe0L3d08/1/

출처

2014-08-30 01:22:36

링크가 끊어졌습니다. – lxcky

게시물에 코드 태그가있는 경우 jsfiddle 링크 만 게시 할 수 있기 때문에 가능합니다. 사람들이 복사하여 위치 표시 줄에 붙여 넣기를 바랍니다. –

나는 너무 생각했다. 그러나 지금 당신이 그것을 말하면서, 나는 그 자리에 코드 태그를 추가하고 바이올린을 연결할 것이다. –

수직 탐색 막대 왼쪽의 공백

답변

관련 문제