Margine inferiore per gli elementi di collegamento <a>

Ho un problema con margin-top/bottom su <a> elementi: non sembra funzionare.Margine inferiore per gli elementi di collegamento <a>

Questo è il codice HTML:

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

Questo è il codice 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; 
}

questo è come il risultato finale assomiglia. Il problema è ovvio, voglio 5 o 10px di margin-bottom per gli elementi <a>, ma la proprietà non viene applicata.

enter image description here

Che cosa mi manca?

fonte

2012-08-15 George Grigorita

È necessario aggiungere display: inline-block; al selettore di ancoraggio. Le ancore sono per definizione elementi in linea e non accettano larghezza, altezza, margine ecc. Fino a quando non vengono definiti come elementi a livello di blocco o blocco in linea.

fonte

2012-08-15 12:41:32 Kyle

Si noti che il supporto per 'inline-block' è relativamente nuovo nei browser, quindi nel caso sia necessario supportare i browser più vecchi fare riferimento a questo link: http://caniuse.com/inline-block –

Vero, credo è apparso in IE7. – Kyle

Grazie per la risposta Kyle, funziona! Sune, grazie per le informazioni extra. Lo sto utilizzando su un tema solo per dispositivi mobili, quindi dovrebbe essere sicuro. –

Penso che sia meglio fare display:block; e float:left; perché display:inline-block; non è supportato in tutti i browser.

fonte

2012-08-15 12:45:46

Margine inferiore per gli elementi di collegamento <a>

risposta

Problemi correlati