Valor del ancho de CSS = ancho de visualización del interior?¿Cuál es la relación entre margen, relleno y ancho en diferentes navegadores?
o
CSS valor width = ancho de la pantalla de interior + CSS margen izquierda + CSS margen derecha?
Tienes que familiarizarte con el CSS Box Model. Explica dónde funcionan el relleno, el margen y el borde, así como el ancho.
Sin embargo, tenga en cuenta que diferentes navegadores implementan esto de manera diferente: más notablemente, Internet Explorer has a box model bug (esto es infame en IE6 - No sé si esto se ha solucionado en IE7 o IE8) que causó el infame "modo de peculiaridades" CSS cortar.
En pocas palabras, Internet Explorer estableció su modelo de cuadro para incluir el relleno en el cálculo del ancho, a diferencia del estándar oficial en el que el ancho solo debería constituir el contenido.
No solo depende del navegador y la versión que elija, sino también del doctype de su documento html. Internet Explorer en el "modo peculiar" es, por ejemplo, completamente diferente de Internet Explorer con doctype XHTML 1.0 Transitional.
Como lo mencionaron otros, la regla de oro es CSS box model. Esto funciona generalmente como lo anuncian los navegadores como Opera, Firefox & Safari. Internet Explorer es su excepción, donde el "ancho" incluye los márgenes, el relleno y los bordes.
Existen algunas excelentes herramientas que describen visualmente cómo el navegador ha procesado el contenido. Para Firefox echa un vistazo a Firebug y para Internet Explorer mira el Developer Toolbar.
Here puede ver un diagrama animado que "explota" la caja.
Creo que IE antes de la versión 6 incluía incorrectamente los bordes y el relleno en ancho y alto. Ver: Microsoft Admits IE 5 is Messed Up
Pero lo arreglaron, y no tienes que preocuparte siempre que configures el doctype correcto, para que IE no esté en el modo peculiar. – Breton
Sí, me refería a IE6. Voy a editar mi respuesta para eso, gracias. :) –