¿Qué margen: 5px 0; y margen: 5px 0 0; ¿media?

Question

¿margin:5px 0; significa margin:5px 0 0 0; o margin:5px 0 5px 0;?

¿margin:5px 0 0; significa margin:5px 0 0 0;?

Lo mismo para el relleno, por supuesto.

Además, ¿es coherente en todos los navegadores (incluido IE6)?

Answer 1

Según Box Model:

• Si sólo hay un valor, se aplica a todos lados.
• Si hay dos valores, los superior y inferiores márgenes están establecidos a el primer valor y el derecho y izquierda márgenes se establecen en la segunda.
• Si hay tres valores, la superior se establece al primer valor, el izquierda y derecho se fijan a la segunda, y la parte inferior se establece en la tercera.
• Si hay cuatro valores, se aplican a la parte superior , derecho, inferior, y izquierda, respectivamente.

body { margin: 2em }   /* all margins set to 2em */ 
body { margin: 1em 2em }  /* top & bottom = 1em, right & left = 2em */ 
body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */ 

Esto se define por el estándar CSS, lo que debe ser consistente a través de todos los navegadores que implementa CSS correctamente. Para las compatibilidades del navegador, echa un vistazo a CSS Support History y quirksmode de blooberry. Según blooberry, margin se implementó por primera vez en IE3, por lo que IE6 debería estar bien.

Answer 2

Para margen y el relleno, se puede especificar uno, dos, tres, o cuatro valores separados de espacio en blanco:

1. un valor: Los cuatro lados utilizar ese valor.
2. Dos valores: arriba/abajo obtener el primer valor; izquierda/derecha conseguir el segundo
3. tres valores: superior obtiene la primera, izquierda/derecha conseguir el segundo, inferior obtiene el tercer
4. cuatro valores: arriba, derecha, abajo, izquierda (es decirlas agujas del reloj desde el mediodía) obtener cada valor

Answer 3

margin: 5px 0; significa margin: 5px 0 5px 0;

margin: 5px 0 0; significa margin: 5px 0 0 0;

Todos los navegadores siguen este, incluyendo IE 6.