css - tamaño - ¿Cuál es la relación entre margen, relleno y ancho en diferentes navegadores?
redimensionar texto css (5)
¿Valor de ancho de CSS = ancho de visualización del interior?
o
Valor de ancho de CSS = ancho de visualización de adentro + margen de CSS-izquierda + margen de CSS-¿correcto?
Como lo mencionaron otros, la regla de oro es el modelo de caja de CSS . Esto funciona generalmente como lo anuncian los navegadores como Opera, Firefox y 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 echa un vistazo a la barra de herramientas del desarrollador .
No solo depende del navegador y la versión que elijas, sino también del doctype de tu documento html. Internet Explorer en el "modo peculiar" es, por ejemplo, completamente diferente de Internet Explorer con doctype XHTML 1.0 Transitional.
Aquí puedes ver un diagrama animado que "explota" la caja.
Creo que IE antes de la versión 6 incluía incorrectamente bordes y relleno en ancho y alto. Ver: Microsoft admite que IE 5 está dañado
Tienes que familiarizarte con el modelo de caja de CSS . 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 tiene un error de modelo de caja (esto es infame en IE6 - No sé si esto se ha solucionado en IE7 o IE8) que causó el infame "modo peculiar" "Hack de CSS.
En pocas palabras, Internet Explorer estableció su modelo de caja 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.