Diseñorama » Articulos

El Modelo de Cajas

Escrito por Kemie Guaida en 11.05.04

Si estas acostumbrado a trabajar con tablas, sabes que tu pagina esta dividida en cuadrados definidos por celdas y tablas. 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í:

• 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:

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;}

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

1. 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!
   

2. 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í!
   

3. 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.
   

4. 16 junio 2004, 01:50Adan Luna

   Wow, excelente artículo!, ahora se por que no me salen las cajas como quiero jajajajaj.
   

5. 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.
   

6. 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/
   

7. 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.
   

8. 23 junio 2004, 11:04Aloga

   Una explicación muy buena y sencilla con el gif del marco ;)
   

9. 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
   

10. 7 julio 2004, 01:55Mordor!

    Super interesante… de una vez el sitio será agregado a mis favoritos…
    

11. 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
    

12. 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
    
    

13. 10 diciembre 2004, 20:29sariputra

    es encantador encontrar esta información reunida en castellano.
    

14. 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!
    

15. 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
    

16. 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?
    

17. 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?
    

18. 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
    

19. 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)
    

20. 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
    

21. 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.
    

22. 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.
    

23. 5 agosto 2005, 23:36Las 2 menos 20

    No ha salido entero el Doctype.
    Era este:
    
    

24. 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.
    

25. 6 septiembre 2005, 08:29Jose Nicodemus Figueroa Cortazar

    Wow! me encantó toda la web.. gracias, si tienes mas enlaces x favor envialos! :)
    

26. 18 septiembre 2005, 18:55DvD AdN

    Otra vez yo, gracias de nuevo Kemie y felicidades por la web!!!
    

27. 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
    

28. 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!!
    

29. 19 febrero 2006, 06:32Manuel

    Te felicito, interesantísimo artículo, me ha servido bastante.
    
    Saludos!
    

30. 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!
    

31. 16 marzo 2006, 19:55Dan

    Mil gracias por el hack, me ha sido muy muy útil.
    

32. 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 ;)
    

33. 17 julio 2006, 14:17jorge

    Conteudo muito bom
    parabens
    jorge

34. 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!

35. 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.

36. 8 abril 2007, 21:44jeni

    grasias por poner esta pagina de toda mi familia

37. 30 enero 2008, 18:24Luciano

    Muy buen blog

38. 18 abril 2008, 01:22CARLOS

    PON MAS INFORMACION

39. 6 enero 2009, 12:51fabrizio

    muy bueno, felicidades

40. 24 octubre 2009, 02:18Zeul

    Muchas Gracias por este post,me ayudo muchisimo,sigue asi,y porfa pon mas post para primcipiantes zaz?

41. 3 noviembre 2009, 20:46anRoswell

    Hermano k vacano las imagenes donde explicarn los margin, padding y demas, muy bueno…

42. 18 diciembre 2009, 00:35MAxi

    muchas gracias me resolvio una duda que tenia

---

¡Comenta!

Nombre:

Email:

URL:

Mensaje: