¡Misterio! Diferentes resultados en HTML-kit y Firefox

Aquí pongo captura de una prueba sencilla en HTML-kit, he subrayado en CSS lo que corresponde al cuadrado marrón con el verde dentro. He centrado el verde mediante el padding del marrón que lo contiene:

[contenido no disponible]

Y aquí pongo lo que aparece en Firefox, los márgenes son desiguales y el cuadrado verde queda descentrado. ¿A qué se debe esto? Gracias, un saludo.

[contenido no disponible]

No todos los navegadores interpretan los codigos de la misma manera y lo mismo pasa con programas como html-kit o similares, podrias darle el width del cuadro verde en porcentajes para que se ajuste mejor width:95%; heigth:95%;

Caray, no entiendo cómo se puede interpretar algo cambiando las medidas estipuladas, la llevo clara si todo sale así.

El cuadrado marrón tiene 240 píxeles de ancho, y el verde 220. Sobran 20, repartidos en 10 por cada lado.
El cuadrado marrón tiene 180 píxeles de altura, y el verde 160. Sobran 20, repartidos en 10 por cada lado.

Y el padding del cuadrado marrón son 10 píxeles en los cuatro lados. ¿¿Cómo se puede interpretar eso en vez de cumplirlo al pie de la letra???

¿¿Y cómo sé que no va Firefox a interpretar a su bola también ese 95%?? :confused::confused:

Gracias, un saludo.