css table-cell, el contenido tiene un margen superior innecesario

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.

Fuente

2012-07-12 Ashwin

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

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

Fuente

2012-07-12 07:23:22

¡Perfecto! eso funciona. – Ashwin

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

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.

Fuente

2017-02-13 07:42:51 lulalala

css table-cell, el contenido tiene un margen superior innecesario

Respuesta

Cuestiones relacionadas