Problemas con el posicionamiento

Tamaño total de los elementos

La recomendación CSS2 del W3C establece que el relleno (padding), el margen y el margen se añaden al tamaño definido para el elemento (con las propiedades width y height).

Mozilla sigue la recomendación, pero Internet Explorer no. En concreto, Internet Explorer incluye el borde y el relleno (padding) dentro del elemento, en vez de añadirlo. El resultado es que los elementos son más grandes en Mozilla que en Internet Explorer.

El siguiente ejemplo muestra varias divisiones con el mismo tamaño, pero con diferentes rellenos, bordes y márgenes. El fondo cuadriculado permite comparar el tamaño total de cada división. Hay que tener en cuenta que las divisiones con margen parecen desplazadas de su posición.

Ejemplo de tamaño total de los elementos