Duda con display: block en un div

[Caquilla23]

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:

#x {
    margin: 0 auto; 
    text-align: center;
    font-size: 0.9em;
    font-family: Arial, "MS Trebuchet", sans-serif;
    background-color: yellow;
}
 
#x table {
    border: 2px dashed grey;    
}
 

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.

[Alvaro_Franz]

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:

#x {
    margin: 0 auto; 
    width:400px;
    text-align: center;
    font-size: 0.9em;
    font-family: Arial, "MS Trebuchet", sans-serif;
    background-color: yellow;
}
 
#x table {
    display:block;
    border: 2px dashed grey;    
}
 

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.

[Caquilla23]

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.

[Alvaro_Franz]

Iniciado por Caquilla23

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.