Pantalla: tabla-celda, contenido y relleno

Tengo una página HTML muy sencilla que muestra el contenido en dos columnas. Para formatear las columnas, estoy usando <div> como el contenedor externo (display: table-row) y dos inner <div> como las columnas reales (display: table-cell). Una de estas columnas tiene un relleno en la parte superior. El marcado se parece a la siguiente - el marcado adicional y estilos omitido para mayor claridad:Pantalla: tabla-celda, contenido y relleno

<style> 
.row { display: table-row } 
.cell { display: table-cell; border: 1px solid black; width: 150px } 
.content { background-color: yellow } 
</style> 

<div class="row"> 
    <div class="cell"> 
     <div class="content">Some content; this is not padded.</div> 
    </div> 

    <div class="cell"> 
     <div class="content">More content; padded at the top.</div> 
    </div> 
</div>

Me estoy poniendo esto:

enter image description here

pero me esperaba esto:

enter image description here

El comportamiento es el mismo si se aplica padding-top a la celda o al contenido. ¿Me estoy perdiendo algo? Gracias.

Fuente

2011-02-14 Humberto

podríamos tener algo de código HTML? –

Sí, ¡allá arriba después del primer párrafo! – Humberto

Jaja, por alguna razón, la primera vez que vi esto, pensé en Myles Gray. ¡Mira quien esta aquí! – Shaz

Puede lograr sus dos resultados deseados simplemente usando padding y margin en su div con la clase content. Recuerde, el relleno contribuirá al ancho y la altura generales de un objeto, de modo que se ampliará el color de fondo.

Primera captura de pantalla:

<div class="content" style="margin-top: 10px">More content; padded at the top.</div>

Segunda captura de pantalla:

<div class="content" style="padding-top: 10px">More content; padded at the top.</div>

Fuente

2011-02-14 18:46:57 wsanville

Bueno, 'margin' no funcionó, y' padding' es exactamente lo que estoy usando para producir el renderizado amarillo (_undesired_)! Para mayor claridad, incluyo algunos detalles en la captura de pantalla. ¡Gracias! – Humberto

Le doy el 'margen' al div 'content'. Echa un vistazo al ejemplo de trabajo: http://jsfiddle.net/4GYn9/ – wsanville

Whoops - Yo mismo había dejado "verticalmente" al alinear verticalmente en la clase .cell y eso solo lo resuelve todo. He actualizado el ejemplo en jsFiddle; Echale un vistazo. Estaba jugando con 'vertical-align' pero no presté atención ya que estaba ocupado preparando esta pregunta ... ¡gracias de todos modos! – Humberto

Pantalla: tabla-celda, contenido y relleno

Respuesta

Cuestiones relacionadas