Cuándo y por qué margen Auto no funciona en CSS
En esta publicación, explicaremos cuándo y por qué Margin Auto no funciona en CSS.
¿Qué es la propiedad de margen??
CSS "margenLa propiedad se utiliza para crear espacio vacante alrededor del elemento, que podría ser desde la izquierda, la derecha, la parte superior e inferior. El espacio definido siempre tiene lugar fuera del elemento HTML seleccionado.
Sintaxis
margen: longitud | auto;El valor "longitud"Se refiere al margen de elementos, que se pueden especificar en REM, PT, PX y en otras unidades. Valor "auto"Permite que el navegador ajuste el margen.
Para ver la propiedad de margen general, puede consultar este artículo dedicado.
Cuándo y por qué margen Auto no funciona en CSS?
Cada elemento HTML tiene un tipo de visualización de forma predeterminada, uno es "bloquear", Y el otro es"en línea". En HTML, algunos son elementos de nivel de bloque, y otros son elementos en línea de forma predeterminada. Los elementos de nivel de bloque tienen un ancho del 100% predefinido, mientras que los elementos en línea no tienen ancho o relleno predefinidos.
Elemento HTML tipo bloque
Aquí en nuestro archivo HTML, dos " <> Bloque
Bloquear
El valor de visualización como bloque se aplicará de forma predeterminada a
elemento y consumirá el ancho del 100% como se muestra a continuación:
Ahora, agregemos el "margen"Propiedad con"auto"Valor a nuestro elemento de tipo de bloque
a lo largo de "ancho" de "50px":
pagsAncho: 50px;
margen: auto;
Después de guardar el código mencionado, observe que el ancho predefinido ha sido anulado con 50px y el margen automático ha ajustado el elemento al centro:
Avancemos hacia elementos HTML de tipo en línea.
Elemento HTML de tipo en línea
Como la imagen a continuación muestra que cuando hemos declarado algún texto dentro de las etiquetas, no consumieron ningún espacio; Es solo porque el valor de visualización en línea se ha aplicado de forma predeterminada en este elemento:
Ahora, si aplicamos la propiedad de ancho o la propiedad de margen con valor automático en el elemento de tramo. Como resultado, no se producirán efectos. Porque cuando se aplica la pantalla en línea, hace que el elemento sea obligatorio solo consumir el espacio que existe dentro de sus etiquetas.
Consejo de bonificación
Si la propiedad de visualización para un elemento se establece en línea de forma predeterminada, puede anularlo especificando el bloque de valor de la propiedad de visualización por sí mismo.
Eche un vistazo a continuación en el ejemplo explicado.
Ejemplo
Usemos intencionalmente un elemento con un valor en línea predefinido, como:
> En línea
En el siguiente paso, utilice la propiedad de visualización a lo largo del valor "bloquear". Establezca el ancho en 50px y margen para auto como se explica:
durarbloqueo de pantalla;
Ancho: 50px;
margen: auto;
Producción
Hemos elaborado cuándo y por qué Margin Auto no funciona en CSS.
Conclusión
El margen automático no funciona con elementos que tienen una visualización en línea de forma predeterminada, como SPAN. Solo los elementos con el bloque de pantalla predefinido funcionan con margen automático. Sin embargo, puede anular el comportamiento en línea de un elemento y hacer que se comporte como un elemento tipo bloque. Este artículo discutió por qué y cuándo Margen Auto no funciona dentro de CSS.