<a>のマージンボトム

Question

の<a>の要素に問題があります。動作していないようです。

これは、HTMLコードです：これは、最終的な結果はどのように見えるかです

.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; 
} 

：

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

これは、CSSコードです。問題は明らかです。<a>要素の場合は5または10個のmargin-bottomが必要ですが、プロパティは適用されません。

私は何をしないのですか？

Answer 1

アンカーセレクタにdisplay: inline-block;を追加する必要があります。アンカーは定義上、インライン要素であり、ブロックレベルまたはインラインブロック要素として定義されるまで、幅、高さ、余白などを受け入れません。

Answer 2

display:inline-block;はすべてのブラウザでサポートされていないため、display:block;とfloat:left;の方がよいと思います。