Saltar la navegación

El modelo de caja

El modelo de caja
CSS Cheat Sheet (CC BY-NC-SA)

Según el modelo de caja, el siguiente código CSS aplicado a una capa con el ID "box", generaría una "caja" de 200 píxeles de ancho:

#box {
    width: 150px;
    border: 5px solid #000;
    padding: 20px;
}

En ocasiones (en determinados navegadores si no se ha especificado el DOCTYPE, por ejemplo) puede ser problemático, y podemos solucionarlo de la siguiente forma:

#box {
    width:200px;
}

#box div{
    border: 5px solid #000;
    padding: 20px;
}

Y algo de marcado adicional:

<div id="box"><div>Contenido de la capa.</div></div>

Encontraréis más información relacionada con este último punto en esta página: Internet Explorer box model bug.