Phần lề dưới cùng cho các phần tử liên kết <a>

Question

Tôi gặp sự cố với margin-top/bottom trên các yếu tố <a> - nó dường như không hoạt động.

Đây là mã HTML:

<div class="pages-link"> 
    <a href="#">1</a> 
    <a href="#">2</a> 
    <a href="#">3</a> 
    .... 
</div> 

Đây là mã CSS:

.pages-link { 
    margin:2em 0; 
    word-spacing:.25em; 
} 

.pages-link a { 
    background:#d7d7d7; 
    border:1px solid #ccc; 
    -moz-border-radius:3px; 
    -webkit-border-radius:3px; 
    -khtml-border-radius:3px; 
    border-radius:3px; 
    color:#333; 
    padding:.3em .5em; 
    text-decoration:none; 
} 

này là làm thế nào kết quả cuối cùng như thế nào. Vấn đề là hiển nhiên, tôi muốn 5 hoặc 10px của margin-bottom cho các yếu tố <a>, nhưng thuộc tính không được áp dụng.

Tôi đang thiếu gì?

Answer 1

Bạn cần thêm display: inline-block; vào bộ chọn neo của mình. Các neo là các phần tử nội tuyến định nghĩa và không chấp nhận chiều rộng, chiều cao, lề, vv cho đến khi chúng được định nghĩa là các phần tử khối hoặc nội tuyến khối.

Answer 2

Tôi nghĩ bạn nên làm display:block; và float:left; vì display:inline-block; không được hỗ trợ trong tất cả các trình duyệt.