Quando si gestiscono elementi in linea all'interno di elementi di blocco, non si dispone di molte opzioni per modificare le dimensioni del riquadro di delimitazione. min-height non funziona su elementi in linea e line-height non avrà alcun effetto.
L'impostazione di un'opzione padding appropriata potrebbe essere un'opzione ragionevole, ma è probabile che si verifichino problemi con lo sfondo dell'elemento che si sovrappone ad altri elementi all'interno del blocco contenitore.
Come demo veloce, provate questo:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style type="text/css">
span {
background: #0F0;
padding: 0.5em 0;
}
</style>
</head>
<body>
<p>This is some demo text. Look at how <span>texty</span> it is.</p>
</body>
</html>
Vedrai che lo sfondo della texty arco si espande in verticale, ma sarà sovrapposizione di testo su precedenti e seguenti linee. È possibile impostare la proprietà dell'elemento su inline-block nei browser moderni per evitare questo problema, ma in tal caso si avrà una spaziatura delle righe incoerente, che sarebbe quasi certamente fonte di distrazione se si trova all'interno di un blocco di testo.
Penso che la tua migliore opzione, che ti piaccia o no, è semplicemente quella di garantire che l'immagine che desideri applicare ai tuoi collegamenti si adatti al testo che visualizzerai.
fonte
2009-11-16 14:47:38
grazie molto per questo {: – saji