El Modelo de Cajas

Escrito por Kemie Guaida en 11.05.04

Para poder entender como maquetar páginas sin tablas, utilizando solo CSS, debemos primero entender el modelo de cajas, que define la estructura de la página a la que aplicaremos los estilos.

Si estas acostumbrado a trabajar con tablas, sabes que tu pagina esta dividida en cuadrados definidos por celdas y tablas. Muestra de estructura con cajas Cuando trabajas con CSS-P, también trabajas con cuadrados. Estos cuadrados pueden ser definidos por elementos de la estructura de tu página, como encabezados y párrafos. Si quieres agrupar varios elementos, utilizas el tag <div> o <span> . Esto marca un bloque de contenido en tu pagina.

Pongamos como ejemplo, una pagina tipica, con encabezado, una barra lateral, contenido, y un pie. Podriamos estructurarla con divs como aparece a la izquierda.

Nuestro codigo se vería algo así:

<div id="header">
  aquí va el contenido del header
</div>
<div id="barra">
	aquí va el contenido de la barra lateral
</div>
<div id="contenido">
	aquí va el contenido principal
</div>
 <div id="pie">
      aquí va el contenido del pie de página
</div>

Cada div puede contener otros divs, párrafos, imágenes o cualquier otro elemento, y con CSS podemos definir sus propiedades, como color de fondo, bordes, tamaño, posicionamiento, fuentes, etc.

Bloques y lineas

Hay dos tipos de cajas: block e inline . Un parrafo, por ejemplo, se considera como un bloque, y por lo tanto por default se despliega como tal. Esto quiere decir que un párrafo que siga a otro se desplegará así:

[parrafo1]

[parrafo2]

Un elemento como un <span>se considera como un elemento en linea, o inline, y por lo tanto un span seguirá a otro linealmente, asi:

[span1] [span2]

Se puede cambiar el tipo de caja utilizando la propiedad display:block o display:inline.

El modelo correcto

Cada bloque está formado por varias partes. Si imaginamos que cada bloque es como un cuadro colgado en una pared, los elementos se verían así:

diagrama del modelo de cajas

El contenido, es obviamente lo que contiene el bloque, sea texto, imagenes u otros bloques.
Width se refiere al ancho del contenido, height al alto
Padding es el espacio que hay entre el contenido y la orilla del bloque.
Border es el borde de la imagen.
Margin es el espacio entre un elemento y los elementos adyacentes.

Pero la cosa, por supuesto, no puede ser tan sencilla...

El modelo según Bill Gates y Co.

El W3C es el organismo encargado de definir los estándares que se usan en el internet. Esto asegura que si una página se adhiere a estos estándares, podrá ser leido por cualquier navegador en cualquier plataforma. Sin embargo, Microsoft, no respeta por completo los estándares para el modelo de cajas de la W3C en muchas de las versiones de Internet Explorer. En vez de ello, interpreta las cajas de esta manera:

diagrama del modelo segun ie5

IE5.x interpreta la propiedad width como la suma del ancho del contenido mas el padding mas el borde de un bloque. ¿Cómo afecta esto el diseño con CSS? Supongamos que tenemos la siguiente especificación:

#caja {
  width:100px;
  padding:20px;
  border:10px;}

diagrama comparativo de modelos de caja Sería interpretado de esta manera-->

Versiones más recientes de IE (6.0 y mayores) implementan el modelo correctamente, siempre y cuando los documentos contengan un doctype valido.

El parche

¿Qué hacer al respecto? Por un lado Internet Explorer es el navegador más utilizado, pero por otro, si estructuramos mal la página no solo estamos dejando de lado a los usuarios de otros navegadores, sino también de posibles futuras versiones de Internet Explorer.

Afortunadamente la comunidad de desarrolladores ha encontrado maneras de aprovechar otros errores que tiene Explorer en la interpretación de las hojas de estilo para esconder algunos atributos y mostrar otros. El primero en hacer esto fue Tantek Celik, que desarrolló lo que ahora se conoce como box model hack. Por ejemplo, para corregir el caso anterior

#caja {
  width:130px;
  voice-family: "\"}\"";
  voice-family:inherit;
  width:100px;
}

Usando el caracter \, "confundimos" a IE5.x y este ignora la ultima declaración de width, mientras que los demás navegadores toman la ultima declaración, que es la correcta según los estándares. De esta manera la caja se despliega de la misma manera en cualquier navegador.

Hay infinidad de parches o hacks para corregir el modelo de cajas de IE, personalmente el que uso es:

#caja{
	width:  100px;  /*1-para opera*/
	\width: 130px; /*2-para ie-se agrega el padding y border*/
	w\idth: 100px; /*3- estandares*/
}

Enlaces Relacionados:

Comentarios

15 junio 2004, 21:21processblack
Muy bien el artículo. Para los que empiezan de gran ayuda y que buenos los links!

Por cierto, este formulario es la caña!
15 junio 2004, 22:36pedro_fm
un artículo muy didáctico! enhorabuena por el sitio. el nivel de acabado es impresionante y el codigo fuente me ha hecho sentir muy pequeñito :)

a seguir así!
15 junio 2004, 23:28EME
Muy aclaratorio la explicación sobre todo para los que el código se nos atraganta un poco.

Buen trabajo.
16 junio 2004, 01:50Adan Luna
Wow, excelente artículo!, ahora se por que no me salen las cajas como quiero jajajajaj.
19 junio 2004, 00:46jorge
hola, un articulo muy interesante, una duda me queda, cuando dices:

“Versiones más recientes de IE (6.0 y mayores) implementan el modelo correctamente, siempre y cuando los documentos contengan un doctype valido.”

vale con cualquier doctype valido o alguno en especial? a todos mis documentos les pongo el doctype que me pone el dreamweaver por defecto: “” pero segun el navegador me interpreta el borde por dentro o por fuera.

hay solucion utilizando algun tipo de doctype en concreto??

gracias y felicidades por el articulo.
19 junio 2004, 01:04kemie
tu doctype no salió aquí, pero lo vi en la notificación que me llegó, y en efecto, es incorrecto porque le falta el url. Para una lista completa de doctypes validos, te recomiendo veas este articulo de A List Apart: http://www.alistapart.com/articles/doctype/
23 junio 2004, 00:27mark
Excelente artículo, por fin le entiendo a las diferencias entre los box models.

Gracias por la página, la encontré desde del.icio.us.
23 junio 2004, 11:04Aloga
Una explicación muy buena y sencilla con el gif del marco ;)
24 junio 2004, 04:19casperxs
Inche kemie, eres mi teacher, gracias por compartir tus conociemientos, buen articulo heee !!!, y felicidades por diseñorama.com ;D
7 julio 2004, 01:55Mordor!
Super interesante… de una vez el sitio será agregado a mis favoritos…
16 julio 2004, 02:09Christian Vazquez
hola otra vez yo

bueno he leido sus articulos y creo que me tienen prisionero de su pagina
la verdad me gustaria aprender muchas cosas mas ya que hay en demasia que no conozco,; y con sus ejemplos creo que entoiendo el concepto y la idea de lo que transmiten; sin embargo creo que seria bueno que pusieran links, que representaran en sus paginas los problemas que uds indican, o los aciertos que tienen. esto con el fin de una mejor calidad de entendimiento por parte nuestra.
gracias
1 septiembre 2004, 23:15soledad
hay algun inconveniente en la visualizacion de el contenido que proponen. me aparece luego de la linea blanca a la derecha dely un palabra por linea.
espero puedan solucionanrlo.
saludos
soledad
10 diciembre 2004, 20:29sariputra
es encantador encontrar esta información reunida en castellano.
3 marzo 2005, 09:56Vuarnet
Este artículo es la caña… Una berve introducción pero bastante aclaratoria, ahora hay que ir aprendiendose los hacks

Saludos Kemie y eres la master!
4 marzo 2005, 03:26Alex
Kemie, estás haciendo un trabajo maravilloso al publicar esta clase de artículos en español! Gracias!
Vaya! a simple vista me has creado confusión! Si agregas 20 de padding y 10 de borde ¿la caja no tendría que ser de 160 px?
Yo personalmente utilizo otro hack, específico para IE (la madre de los dolores de cabeza), tomando tu ejemplo:

*html #caja {
width:160px;
padding:20px;
border:10px;
}

con eso estaremos corrigiendo el Modelo para IE 5.x

Saludos
10 marzo 2005, 09:02Virginia
Muy interesante el artículo.
Como todos les de este sitio que uno de lo mejores sobre CSS y estándares :)
Sólo tengo una pregunta, ¿porque al encerrar todos los div en una div base (o div contenedora) en Firefox no hay caso que se expanda en el alto? He probado varios consejos, incluso el de agregar al final de las capas, antes de cerrar la capa contenedora, un párrafo con clear… :( ....cerré todas las capas, están bien organizadas…no hay caso….
¿Alguna idea?
11 marzo 2005, 15:15Ana Morgenstern
esta bueniisima la pagina…les queria preguntar si saben de algu curso de pag web que pudiera hacer? o saben de alguno online?
25 mayo 2005, 23:59Luis Carlos Rodriguez
Saludos, muy interesante el articulo, pero he estado tratando de atacar este asunto de compatibilidad y ahora me encuentro con lo siguiente:

Internet explorer 6.0x sigue interpretando el tamaño de los div ya con padding margenes y scroll tal cual como lo hace el 5.0x, pero a la hora de aplicar los parches no ignora lo que quiero que ignore segun el codigo especificado alla arriba.

Pareciera que ahora tengo que buscar la manera de engañar al resto de los navegadores ;s

por si acaso mi tag doc type es:

los tamaños los asigno mediante javasript y php despues de medir la resolucion de pantalla. pero igual no logro que ambos interpreten bien.

Aun sin tener conexion a internet puedo usar:

?????

Saludos y felicitaciones
26 junio 2005, 05:23infusive
la costubre de dremwever… me obliga apreguntar si existe algun programe que ayude visualmete a hace las cajas.? (otro mejor programa)
5 agosto 2005, 21:32Las 2 menos 20
Hola.
Siempre he oído que IE5 interpreta mal el modelo de cuadro, pero tengo comprobado que en versiones posteriores lo sigue interpretando mal.
Yo tengo el 6 y lo interpreta mal.
¿Puede tener algo que ver con el sistema operativo? Tengo windows xp.
Gracias
5 agosto 2005, 22:04Kemie
No tiene que ver con el sistema operativo, sino con el doctype que tengas en tu html. Checate este artículo para más detalles de los modos estricto y “quirks” de ie.
5 agosto 2005, 23:31Las 2 menos 20
Sí, lo acabo de solucionar cambiando el doctype que tenía (sin uri):

Por este otro:

Ahora también tengo que cambiar a xhtml, qué miedo.
5 agosto 2005, 23:36Las 2 menos 20
No ha salido entero el Doctype.
Era este:
14 agosto 2005, 00:31Las 2 menos 20
Gracias Kemie por el Doctype, pero al final preferí XHTML.

Tengo una pregunta:
Mozilla deja un espacio entre el bloque contenedor y la parte inferior de la ventana del navegador.
¿Hay alguna manera de eliminar este espacio para que quede como en Explorer(sin espacio)?
Gracias anticipadas y un saludo.
6 septiembre 2005, 08:29Jose Nicodemus Figueroa Cortazar
Wow! me encantó toda la web.. gracias, si tienes mas enlaces x favor envialos! :)
18 septiembre 2005, 18:55DvD AdN
Otra vez yo, gracias de nuevo Kemie y felicidades por la web!!!
22 septiembre 2005, 06:26Raul Reyes
¡Gracias!, esta divino TODO el sitio, es mas me haces oir musica mentalemnte de los 50, solo con esa tema
1 enero 2006, 18:56BossPetta
Genial. Es el primer artículo que leo después de descubrir “disñorama”, y me a encantado. Presonalmente soy un fuerte defensor del standard y a su vez de usar otro navegador que no se IE, mejor si es Firefox ;-)
Un salu2, BossPetta!!
19 febrero 2006, 06:32Manuel
Te felicito, interesantísimo artículo, me ha servido bastante.

Saludos!
20 febrero 2006, 13:03Jorge Rojas (Guatemala)
Muy bien el artículo, de hecho he leído todos los que se hay publicado en este sitio y me han sido de gran ayuda, (sobre todo el de CODIGO SEMANTICO).

Felicitaciones!
16 marzo 2006, 19:55Dan
Mil gracias por el hack, me ha sido muy muy útil.
21 marzo 2006, 03:31Covi
Ummm… yo creo que uso bien el Doctype de mi página, es XHTML Transicional e I.E.6 sigue interpretando mal el modelo de cuadro.
No sé, los Doctypes que he visto son antiguos o no sé, Dreamweaver genera este que es distinto aunque la URL del DTD sea correcta… es que todo lo que he visto son HTML y ningún XHTML… Dreamweaver me genera:
DTD XHTML 1.0 Transitional y la url buena:
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
...además siempre he validado el documento así.
Muchas gracias de antemano y felicidades por la peich ;)

PD: DW como WYSING de esos pffff, lo bueno es en Vista Código ;)
17 julio 2006, 14:17jorge

Conteudo muito bom
parabens
jorge
28 diciembre 2006, 05:41Jonathan C.

muy buen sitio para referencia, pero lastima que no tenga opcion para imprimir los articulos o un css para imprimir. creo que es de lo poco que le falta a este sitio web.
un saludo!
13 marzo 2007, 21:25Rockdrigo, Saltillo, Coah

estoy empezando en esto, pero gracias a tus articulos mi sitio ira creciendo cada dia mas, muy pronto estare a la par de los demas, gracias nuevamente por dar tus conocimientos a los demas; you are a wonderfull person. thanks.
8 abril 2007, 21:44jeni

grasias por poner esta pagina de toda mi familia
30 enero 2008, 18:24Luciano

Muy buen blog
18 abril 2008, 01:22CARLOS

PON MAS INFORMACION