Centro auto de margen CSS con margen superior - ¿VÁLIDO?

Question

¿Es este CSS válido para centrar el div y también aplicar un margen superior?

div { 
    margin: 0 auto; 
    margin-top: 30px; 
    } 

Answer 1

usar lo siguiente para especificar los márgenes:

div { margin: 30px auto 0; } 

Cuál es la abreviatura de:

div { margin : 30px auto 0 auto; } /* margin: [top] [right] [bottom] [left]; */ 

Cuál es la abreviatura de:

div { 
    margin-top: 30px; 
    margin-right: auto; 
    margin-bottom: 0; 
    margin-left: auto; 
} 

Ahora que se conoce el diferentes formas margin s, y/o padding, se puede especificar; la decisión es tuya.

Por lo que respecta a la precedencia, se aplicará la definición posterior; como se define en the spec.

Para encontrar el valor para una combinación elemento/propiedad, los agentes de usuario deben aplicar el siguiente orden de clasificación:

1. Buscar todas las declaraciones que se aplican al elemento y la propiedad en cuestión, para el tipo de medio de destino . Las declaraciones se aplican si el selector asociado coincide con el elemento en cuestión.
2. El tipo principal de las declaraciones es en peso y origen: para las declaraciones normales, las hojas de estilo del autor anulan las hojas de estilo del usuario que anulan la hoja de estilo predeterminada. Para las declaraciones "! Importantes", las hojas de estilo del usuario anulan las hojas de estilo del autor que anulan la hoja de estilo predeterminada. la declaración "! importante" anula las declaraciones normales. Una hoja de estilo importada tiene el mismo origen que la hoja de estilo que la importó.
3. La clasificación secundaria es por especificidad del selector: selectores más específicos anularán los más generales. Los pseudoelementos y las pseudoclases se cuentan como elementos y clases normales, respectivamente.
4. Finalmente, ordenar por orden especificada: si dos reglas tienen el mismo peso, origen y especificidad, esta última especificada gana. Las reglas en las hojas de estilo importadas se consideran antes que cualquier regla en la propia hoja de estilo.

Aparte del ajuste "! Important" en las declaraciones individuales, esta estrategia otorga a las hojas de estilo del autor un mayor peso que las del lector. Por lo tanto, es importante que el agente de usuario dé al usuario la capacidad de desactivar la influencia de una determinada hoja de estilo, por ejemplo, a través de un menú desplegable.

Como otros han mencionado, es probable que tengas que especificar un ancho fijo con el fin de ver a su centrado div ...

Answer 2

no veo por qué no ... también se puede acortar este a:

div {margin: 30px auto 0;}

Answer 3

sí, pero en lo que respecta a centrar el div usted también desea aplicar width a ella.

Answer 4

Es válido, pero puede ser más corto de esta manera:

div {margin: 30px auto 0;}

Cuando sólo se dan tres valores, el valor medio se aplica a ambos lados izquierdo y derecho.

Answer 5

sí lo es, porque margin: 0 auto está configurando arriba y abajo a 0 y de izquierda a derecha a automático, por lo que establecer 30px es exactamente lo mismo que decir margen: 30px auto 0 auto;

Answer 6

Sí, es válido. margin-top anulará la regla margin.

Aunque es posible que desee agregar un width para centrarlo.

Answer 7

Sí. Y tienen razón:

div { width: 90%; margin : 30px auto 0 auto; } 

Generalmente utilizo 90% de ancho como un buen punto de partida.