El tema que ahora os propongo no es nada nuevo. Sin embargo, vamos a rascar un poco más del tema, y vamos a intentar en dos sencillos artículos, arrojar algo de luz al problema del modelo de caja con internet explorer, como no.
Aquí tenemos el modelo de caja, tal y como manda el estandar W3C.
A continuación, vamos a ver algo parecido a una disección anatómica. EL modelo de caja en 3D.
Una vez que sabemos lo que manda el estandar, vamos a ver como implementamos medidas al escribir CSS para cajas. Si quisiéramos un bloque de 120px en total, teniendo en cuenta margen, padding y borde, deberíamos hacer esto:
<body>
<div id="caja"> <div>
</body>
* {
margin: 0;
padding: 0;
}
#caja {
width: 80px;
margin: 5px;
padding: 5px;
border: 10px;
}
Según lo expuesto anteriormente, tendríamos como resultado la siguiente forma:
Pero desgraciadamente, como todos sabemos, tenemos que tener en cuenta que hay navegadores que interpretan los estándares como ellos quieren, vamos, que no los respetan. Todos conocemos cual es el navegador que da más problemas a este respecto, internet explorer. Éste, implementa el valor del borde y del padding en el ancho que declaramos en el CSS, por lo que… Houston, tenemos un problema. Problema que resolveremos en la siguiente entrega del modelo de caja.
![](http://a3.twimg.com/profile_images/475092351/saco_normal.jpg" rel="image){kind=small}
Etiquetado como: caja, CSS, estándares web, modelo, XHTML
ArtÃculos relacionados
[...] Cuando terminé de publicar la anterior parte de El dichoso modelo de caja, me pregunté si podría haber sido algo más justo con IE, y la verdad es que sí. [...]
Pingback por ervdesign » El dichoso modelo de caja II — 12 Junio 2006
[...] Relacionado: Alternate Box Model Hacks Test: Más soluciones alternativas. 3dboxmodel : // hicksdesign Interactive CSS Box Model Demo Garbage In, Garbage Out - CSS !important ervdesign " El dichoso modelo de caja ervdesign " El dichoso modelo de caja II Ref: Diseñorama: El Modelo de Cajas « Anterior: Un día en la blogosfera Siguiente: Para evitar el spam » [...]
Pingback por Juglar :: Modelo de caja: Box model :: May :: 2005 — 16 Junio 2006