đệm trái trên thẻ neo

Question

tôi có một jsfiddle bên dưới với ví dụ về các liên kết của tôi được hiển thị trong khối nội tuyến, những gì tôi không hiểu là tại sao có một số loại đệm hoặc lề ở đầu mỗi thẻ neo , có lẽ ai đó có thể giúp tôi, tôi không chắc chắn nếu tôi đã bỏ lỡ một cái gì đó nhưng tôi chỉ không thể dường như tìm hiểu lý do tại sao mà padding là có?

Đây là mã 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> 

Đây là tất cả các mã 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

Khi bạn sử dụng display: inline-block; nó sẽ để lại 4px khoảng cách giữa các yếu tố, vì vậy bạn cần sử dụng margin-left: -4px; hoặc cân nhắc sử dụng float để thay thế.

Demo (Sử dụng margin-left: -4px;)

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

Demo 2 (Sử dụng float tài sản)

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

Lưu ý: Đừng quên để xóa các yếu tố nổi của bạn nếu bạn sử dụng float: left; cho li tài sản.

---

Edit: Tôi muốn xác định inorder rằng để ngăn chặn hành vi này, bạn cũng có thể sửa đổi đánh dấu của bạn (nếu bạn đã truy cập vào nó) hơn bạn có thể xếp hàng li yếu tố của bạn để khoảng trắng giữa các yếu tố sẽ không còn ở đó nữa, ví dụ

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

Answer 2

một giải pháp là đưa

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

trong một dòng. Điều này thực sự là vì các dòng mới được định dạng là dấu cách.

Answer 3

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

của nó là giải pháp tốt nhất mà bạn có thể nhận được