lewa wyściółka na znaczniku zakotwiczenia

Question

Mam jsfiddle poniżej z przykładem linków wyświetlanych w bloku in-line, czego nie rozumiem, dlaczego na początku każdego znacznika zakotwiczenia jest jakiś dopełnienie lub margines , może ktoś mógłby mi pomóc, nie jestem pewien, czy coś przeoczyłem, ale po prostu nie mogę się domyślić, dlaczego ta wyściółka jest tam?

Jest to kod html:

<div class="wrapper"> 
    <header class="main-header"> 
      <h1>blah blah blah</h1> 
      <nav class="main-nav"> 
       <ul class="main-nav-links"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">About Us</a></li> 
        <li><a href="#">Get a Quote</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </nav> 
     </header> 

To jest cały kod CSS:

.wrapper { 
    width: 100%; 
    min-width: 960px; 
} 

.main-header { 
    position: relative; 
    width: 100%;  
    height: 60px; 
    background-color: #41a2cd; 
} 

.main-header > h1{ 
    float: left; 
    margin: 11px 0 0 5px; 
    color: #073a4f; 
} 

.main-nav-links > li { 
    list-style: none; 
    display: inline-block; 
} 

.main-nav-links li > a { 
    text-decoration: none; 
    display: block; 
    color: #073a4f; 
} 

.main-nav-links > li { 
    border-right: 1px solid #45b1e1; 
} 

.main-nav-links li > a:hover { 
    background-color: #ffffff; 
    /*background-color: #50bae8;*/ 
} 

http://jsfiddle.net/pDvZt/

Answer 1

Podczas korzystania display: inline-block; będzie zostawiać odstępów 4px pomiędzy elementami, tak musisz użyć margin-left: -4px; lub rozważyć użycie zamiast tego float.

Demo (Korzystanie margin-left: -4px;)

.main-nav-links > li { 
    list-style: none; 
    display: inline-block; 
    margin-left: -4px; 
} 

Demo 2 (Korzystanie float własność)

.main-nav-links > li { 
    list-style: none; 
    float: left; 
} 

Uwaga: Nie zapomnij wyczyścić elementy pływające jeśli używasz float: left; dla li nieruchomości.

---

Edit: Chciałbym, aby określić, że Inorder temu zapobiec można również modyfikować znaczników (jeśli masz dostęp do niego) niż można wyrównać swoje elementy li tak, że białe przestrzeń między elementy nie będą już tam na przykład

<ul> 
    <li></li><li></li><li></li><li></li> 
</ul> 

Answer 2

jednym rozwiązaniem jest umieszczenie

<li></li><li></li> 

w jednej linii. Dzieje się tak dlatego, że nowe linie są sformatowane jako spacje.

Answer 3

<li></li><li></li> 

Jego najlepszym rozwiązaniem można uzyskać