El div simple que contiene span no tendrá el tamaño correcto
Pensé que tenía bastante conocimiento sobre CSS pero este simple problema me desconcierta.
<div><span>texto de muestra</span></div>
da como resultado que la altura del div sea menor que la altura del tramo si el tramo tiene relleno.
Me doy cuenta de que hay formas de utilizar "flotante" para hacer que el tamaño del div sea correcto, pero los flotadores siempre parecen introducir efectos secundarios no deseados.
¿No existe una forma sencilla y limpia de indicarle al div el tamaño que debe ajustarse a su contenido? Me parece bastante básico. Quizás me estoy perdiendo algo.
En el caso básico, simplemente utilícelo display: inline-blocken el tramo.
Aquí está mi caso de prueba (funciona en 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>
La razón por la que agregar float: leftdiv y span soluciona esto es porque hacer flotar un elemento en línea lo convierte implícitamente en un elemento de bloque. Si no está familiarizado con los matices entre divs y spans (también conocido como la diferencia entre elementos en bloque y en línea), leer http://www.maxdesign.com.au/articles/inline/ debería ser útil.
Hay algunas otras formas de resolver esto, pero es difícil decir cuál es mejor sin saber más sobre el resto del marcado y los estilos.
Añadir overflow:autoal div.
