<a> लिंक तत्वों के लिए मार्जिन-तल

Question

मुझे margin-top/bottom<a> तत्वों पर समस्या है - यह काम नहीं प्रतीत होता है।

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

यह सीएसएस कोड है:

यह एचटीएमएल कोड है। समस्या स्पष्ट है, मैं <a> तत्वों के लिए margin-bottom के 5 या 10px चाहता हूं, लेकिन संपत्ति लागू नहीं होती है।

मैं क्या याद आ रही है?

Answer 1

आपको अपने एंकर चयनकर्ता में display: inline-block; जोड़ने की आवश्यकता है। एंकर परिभाषा इनलाइन तत्वों से हैं और चौड़ाई, ऊंचाई, मार्जिन इत्यादि स्वीकार नहीं करते हैं जब तक कि उन्हें ब्लॉक स्तर या इनलाइन-ब्लॉक तत्वों के रूप में परिभाषित नहीं किया जाता है।

Answer 2

मुझे लगता है कि आप display:block; और float:left; कर रहे हैं क्योंकि display:inline-block; सभी ब्राउज़रों में समर्थित नहीं है।