Foros del Web » Creando para Internet » CSS »

Duda con display: block en un div

Estas en el tema de Duda con display: block en un div en el foro de CSS en Foros del Web. Hola a todos. A ver si me podéis ayudar a resolver la siguiente duda. Tengo un div con una tabla dentro y el siguiente código ...
  #1 (permalink)  
Antiguo 01/08/2011, 14:30
 
Fecha de Ingreso: agosto-2008
Mensajes: 49
Antigüedad: 8 años, 5 meses
Puntos: 0
Duda con display: block en un div

Hola a todos.

A ver si me podéis ayudar a resolver la siguiente duda.

Tengo un div con una tabla dentro y el siguiente código css:

Código CSS:
Ver original
  1. #x {
  2.     margin: 0 auto;
  3.     text-align: center;
  4.     font-size: 0.9em;
  5.     font-family: Arial, "MS Trebuchet", sans-serif;
  6.     background-color: yellow;
  7. }
  8.  
  9. #x table {
  10.     border: 2px dashed grey;   
  11. }


El problema es que tengo un borde en la tabla, tal y como podéis ver en el código. Sin embargo, si aplico el atributo display: block al div, el borde de la tabla me aparece rodeando todo el div. ¿Puede alguien explicarme esto?

Un saludo.
  #2 (permalink)  
Antiguo 01/08/2011, 16:18
Avatar de Alvaro_Franz  
Fecha de Ingreso: mayo-2011
Mensajes: 84
Antigüedad: 5 años, 8 meses
Puntos: 4
Respuesta: Duda con display: block en un div

Viendo tu código por encima, deduzco lo siguiente (pudiendo estar equivocado):

Aplicas margin auto en los lados sin especificar un ancho en concreto. Esto hará que tu caja x ocupe el 100% de su contenedor.

Prueba a darle un ancho a ese contenedor.

Por ejemplo:

Código CSS:
Ver original
  1. #x {
  2.     margin: 0 auto;
  3.     width:400px;
  4.     text-align: center;
  5.     font-size: 0.9em;
  6.     font-family: Arial, "MS Trebuchet", sans-serif;
  7.     background-color: yellow;
  8. }
  9.  
  10. #x table {
  11.     display:block;
  12.     border: 2px dashed grey;    
  13. }

Esto debería crearte una tabla centrada con 400px de ancho, fondo amarillo y borde de líneas.

Pd: El display block obliga a crear un elemento de bloque, que ocupe TODA la línea.

Un saludo.
__________________
La verdadera libertad consiste en dominarse a uno mismo
  #3 (permalink)  
Antiguo 01/08/2011, 16:41
 
Fecha de Ingreso: agosto-2008
Mensajes: 49
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Duda con display: block en un div

Muchas gracias.

Voy a probar.

Yo pensaba que sólo ocurriría si aplicaba el display: block a la tabla, no al div.

Por lo tanto, si aplico un display: block a un div, el contenido del mismo pasará a ocupar todo el ancho permitido ¿no?.

Un saludo.
  #4 (permalink)  
Antiguo 01/08/2011, 17:44
Avatar de Alvaro_Franz  
Fecha de Ingreso: mayo-2011
Mensajes: 84
Antigüedad: 5 años, 8 meses
Puntos: 4
Respuesta: Duda con display: block en un div

Cita:
Iniciado por Caquilla23 Ver Mensaje
Por lo tanto, si aplico un display: block a un div, el contenido del mismo pasará a ocupar todo el ancho permitido ¿no?.
...siempre y cuando no le especifiques tú ningún otro ancho distinto de 100% o igual al ancho del contenido padre.

Aquí lo aprendí, y si tienes curiosidad, deberías echar un vistazo:

>> http://www.librosweb.es/css/capitulo...elementos.html

Un saludo.
__________________
La verdadera libertad consiste en dominarse a uno mismo

Etiquetas: block, display, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:20.