Por qué es display: table-cell afectado por elementos en otras celdas

En una tabla CSS, ¿alguien puede ayudarme comprender por qué un elemento acolchado en la primera columna afectará a un div en la segunda columna?Por qué es display: table-cell afectado por elementos en otras celdas

Aquí hay un ejemplo donde un párrafo tiene un conjunto de relleno. El DIV en la columna de la derecha también está -incorrectamente- acolchado. Tuve problemas similares al especificar la altura de línea en el contenido de la columna izquierda, pero simplifiqué el ejemplo para esta pregunta.

http://jsfiddle.net/APXT7/2/

Hay muchas preguntas similares/relacionados sobre-celda de la tabla pero no pude encontrar uno que se refiere específicamente a esta pregunta.

Fuente

2012-10-10 Nick Pearce

Interesante. Nunca había visto tal efecto. –

No estoy seguro de entender la pregunta. ¿Qué esperas que pase? – j08691

@ j08691 No quiero el espacio por encima del texto en la 'celda' derecha. De hecho, quiero que sea un div con una imagen de fondo, pero se simplifica en el ejemplo para demostrar el problema –

Esto probablemente sea un problema de altura de línea, en lugar de uno de relleno. Eso significa que, aunque puede sospechar, en realidad no se propaga ningún relleno en la columna de la derecha (el valor calculado sigue siendo cero). Todavía lo llamaría un efecto secundario de ajustar el relleno en sus elementos p.

El relleno en la parte superior e inferior de sus elementos p empuja hacia abajo su línea base. Esto hace que la línea base de otras "celdas" en la misma línea/fila cambie también. Por supuesto, puede encontrar todos los elementos esenciales descritos en el spec, pero dado que ambas "celdas" tienen la misma alineación vertical (baseline), deben alinearse cuando se desplaza una.

Fuente

2012-10-12 19:41:20 BoltClock

Me siento obligado a aceptar su respuesta ya que me ofreció una gran explicación ... aunque ahora me queda la siguiente pregunta como el mejor enfoque para ajustar la altura de línea de manera diferente en las "celdas" adyacentes. Parece que la celda correcta solo se ve afectada por el PRIMER elemento en la celda derecha. [jsfiddle actualizado] (http://jsfiddle.net/nickpearce/qnCkd/1). Crearé una nueva pregunta. –

Probablemente pueda usar la propiedad de alineación vertical (vertical-align:top) en la clase de celda o bien div como jsfiddle.net/j08691/APXT7/4. Dado que estos divs se muestran como celdas de tabla, esto puede ser lo que estás buscando.

Fuente

2012-10-14 22:23:40 j08691

Gracias @ j08691; esto definitivamente responde mi pregunta de seguimiento, pero para ser estricto, la primera respuesta se dirigió a mi pregunta original de '¿por qué?'. –

Encontré un truco que "soluciona" esto pero no sé por qué. Lo primero dentro de <div class='cell'> put <div class='hack'> </div> clase hack es .hack { height: 0; } Esto funciona si se coloca en la celda izquierda o derecha

Fuente

2015-08-15 22:41:40

Creo que su respuesta se muestra como se pretende ahora. Eres libre de [editar] más si es necesario. ¡Gracias por responder! –

Por qué es display: table-cell afectado por elementos en otras celdas

Respuesta

Cuestiones relacionadas