semplice div contenente span non si dimensiona correttamente

Pensavo di essere abbastanza esperto di CSS, ma questo semplice problema mi sconcerta.semplice div contenente span non si dimensiona correttamente

<div> <arco> testo di esempio </span > </div >

risultati di altezza del div essere inferiore all'altezza della campata se lo span ha imbottitura.

Mi rendo conto che esistono modi per utilizzare "float" per rendere correttamente la dimensione div, ma i float sembrano sempre introdurre effetti collaterali indesiderati.

Non c'è un modo semplice e pulito per distinguere il div in base al suo contenuto? Sembra abbastanza semplice per me. Forse mi manca qualcosa.

fonte

2010-04-10 brad

L'uso di 'display: block' sullo span è una soluzione, ma non è molto pulito poiché dovresti farlo su tutto ciò che potrebbe essere più grande del div (o almeno l'elemento più alto). –

"piuttosto esperto di CSS" ... non c'è fine alla comprensione dei CSS, vero ?! e meno problemi "semplici" di quanti se ne siano mai potuti immaginare. – Smandoli

Nel caso di base, è sufficiente utilizzare display: inline-block sullo span.

Qui è il mio banco di prova (opere in FF, Chrome e IE 6-8):

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>Span padding test</title> 
</head> 
<body> 
    <div style="background-color: yellow; border: 1px solid red;"> 
     <span style="padding: 50px; display: inline-block;">test</span> 
    </div> 
</body> 
</html>

Il motivo per cui l'aggiunta di float: left al div e span correzioni Questo perché galleggia un elemento in linea converte implicitamente a un elemento di blocco. Se non hai familiarità con le sfumature tra div e span (ovvero la differenza tra blocco e elementi in linea), la lettura di http://www.maxdesign.com.au/articles/inline/ dovrebbe essere d'aiuto.

Ci sono alcuni altri modi per risolvere questo problema, ma è difficile dire quale sia il migliore senza sapere di più sul resto del markup e degli stili.

fonte

2010-04-12 17:47:53 timmfin

nota che display: il blocco inline non funziona in IE6. Overflow: l'auto sul div genitore risolverebbe il problema e funzionerebbe persino in IE6 – meo

Aggiungi overflow:auto al div.

fonte

2010-04-10 21:41:12 fuxia

Questo è il modo migliore. Se non stai attento, potrebbe creare barre di scorrimento. – tloflin

Questo non ha funzionato per me (in Chromium 52). Ciò causa il troncamento del padding della span. – Pistos

semplice div contenente span non si dimensiona correttamente

risposta

Problemi correlati