Firefox se salta a la torera los márgenes

[Linton]

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:





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.

[caricatos]

Hola:

¿Por qué pones el text-index en el body...?
Yo siempre lo pongo solo en los párrafos.

Saludos

[Linton]

Porque quería probar otros efectos que no aparecen en la parte mostrada. ¿Eso tiene algo que ver con mi pregunta?

Gracias, un saludo.

[veruti85]

En todo caso lo que falla es el preview, firefox te lo muestra como lo que estas poniendo

Lo que te puedo decir solo con el css, es que si pones width: 240 y un padding de 10px, estas usando en total un width de 260, ya que se suman, y por lo que se ve, #green va dentro de #brown, con lo que tendrias que ponerle 240 para que te rellene todo o bien un margin: 0 auto para que te lo centre...

Sin el html no puedo decirte mas, espero ayudarte

Un saludo

[Linton]

Iniciado por veruti85

...si pones width: 240 y un padding de 10px, estas usando en total un width de 260, ya que se suman...

Yo tenía entendido que el padding no se suma a las medidas, sino que restringe el área disponible para los contenidos.

Gracias por tu ayuda, un saludo.




.

[pzin]

A la medida se suma el padding si, incluso el borde en caso de que hubiera.

Puedes usar box-sizing para cambiar la naturaleza de esto que es soportado por todos los navegadores.

[Linton]

Vale, cambio el padding del cuadro exterior por margin en el interior. En HTML-kit se ve igual que antes, el cuadro verde centrado:





Y lo que obtengo en Firefox es... una anomalía diferente

[veruti85]

Manten el padding y modifica el width de #brown por 220px, con eso ya lo solucionas...

Saludos