2012-07-12 42 views
13

Estoy usando la disposición de celda de tabla de los bloques div en mi código. Hay un problema en mi código.css table-cell, el contenido tiene un margen superior innecesario

vista previa de cómo se ve mi HTML está here

Cuando tengo ningún contenido (texto o imagen) en mi primer panel, entonces el .inner div del segundo y tercer panel tiene un margen superior de unos 10-15 píxeles . Porqué es eso ?

¿Puede alguien mirar y dejarme saber lo que me estoy perdiendo.

Respuesta

34

añadir vertical-align:top; en #wrapper > div

Ver Demo: http://jsbin.com/avozik/14/edit

+0

¡Perfecto! eso funciona. – Ashwin

+4

Para cualquiera que esté interesado en alguna información de alineación vertical, [esto] (http://phrogz.net/css/vertical-align/index.html) es una buena explicación. – brains911

2

Tengo un caso similar, y vertical-align:top; resuelve el problema. Sin embargo, quiero elaborar razón detrás de esto:

https://jsfiddle.net/46tyc48y/1/

Dado que las células tabla utiliza vertical-align:baseline; por defecto, el texto de la celda derecha se alineará con la línea de base (parte inferior) de la imagen, creando el espacio fantasma en la parte superior. Por lo tanto, debemos establecer explícitamente vertical-align para eludir este comportamiento.

Cuestiones relacionadas