Margen - Trucos CSS

La marginpropiedad define la parte más externa del modelo de caja, creando espacio alrededor de un elemento, fuera de los bordes definidos.

Los márgenes se establecen mediante longitudes, porcentajes o la palabra clave autoy pueden tener valores negativos. He aquí un ejemplo:

.box ( margin: 0 3em 0 3em; )

margin es una propiedad abreviada y acepta hasta cuatro valores, que se muestran aquí:

.box ( margin: || || || )

Si se establecen menos de cuatro valores, los valores faltantes se asumen en función de los definidos. Por ejemplo, los siguientes dos conjuntos de reglas obtendrían resultados idénticos:

.box ( margin: 0 1.5em; ) .box ( margin: 0 1.5em 0 1.5em; )

Por lo tanto, si solo se define un valor, esto establece los cuatro márgenes en el mismo valor. Si se declaran tres valores, lo es margin: (top) (left-and-right) (bottom);.

Cualquiera de los márgenes individuales se puede declarar a mano, en cuyo caso definiría solo un valor por propiedad:

.box ( margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; )

auto y centrado

Cada una de las propiedades del margen también puede aceptar un valor de auto. Un valor de autobásicamente le dice al navegador que defina el margen por usted. En la mayoría de los casos, un valor de autoserá equivalente a un valor de 0(que es el valor inicial para cada propiedad de margen) o cualquier espacio disponible en ese lado del elemento. Sin embargo, autoes útil para el centrado horizontal:

.container ( width: 980px; margin: 0 auto; )

En este ejemplo, se hacen dos cosas para centrar este elemento horizontalmente dentro del espacio disponible:

• El elemento recibe un ancho especificado
• Los márgenes izquierdo y derecho se establecen en auto

Sin el ancho especificado, los autovalores esencialmente no tendrían ningún efecto, estableciendo los márgenes izquierdo y derecho en 0o de lo contrario en el espacio disponible dentro del elemento principal.

También se debe señalar que autoes útil solo para el centrado horizontal, por lo que el uso autode los márgenes superior e inferior no centrará un elemento verticalmente, lo que puede ser confuso para los principiantes.

Márgenes colapsados

Los márgenes verticales en diferentes elementos que se tocan entre sí (por lo tanto, no tienen contenido, relleno o bordes que los separen) colapsarán, formando un único margen que es igual al mayor de los márgenes contiguos. Esto no sucede en los márgenes horizontales (izquierdo y derecho), solo verticales (superior e inferior).

Para ilustrar, tome el siguiente HTML:

Collapsing Margins
Example text.

Y el siguiente CSS:

h2 ( margin: 0 0 20px 0; ) p ( margin: 10px 0 0 0; )

En este ejemplo, el h2elemento tiene un margen inferior de 20px. El elemento de párrafo, que lo sigue inmediatamente en la fuente, tiene un margen superior establecido en 10px.

El sentido común parecería sugerir que el grosor del margen vertical entre h2y el párrafo sería un total de 30 px (20 px + 10 px). Pero debido al colapso del margen, el grosor real termina siendo 20px. Esto se demuestra en el lápiz integrado a continuación:

¡Mira este bolígrafo!

Aunque el colapso de los márgenes puede parecer poco intuitivo a primera vista, en realidad son útiles por algunas razones. En primer lugar, evitan que los elementos vacíos agreguen espacio de margen vertical adicional, generalmente indeseable.

En segundo lugar, permiten un enfoque más coherente para declarar márgenes universales en los elementos de la página. Por ejemplo, los encabezados suelen tener un espacio de margen vertical, al igual que los párrafos. Si los márgenes no colapsan, los encabezados que siguen a los párrafos (o viceversa) a menudo requerirían restablecer los márgenes en uno de los elementos para lograr una cantidad constante de espacio vertical.

En tercer lugar, el colapso de márgenes también se aplica a los elementos anidados. Mira la siguiente pluma:

¡Mira este bolígrafo!

Aquí, el elemento de párrafo tiene un margen superior establecido en 30 px y está anidado dentro de un divelemento con un margen superior de 40 px. Además, el h2elemento tiene un margen inferior de 20px.

Nuevamente, el sentido común sugeriría que el espacio de margen vertical total aquí sería de 90 px (20 px + 40 px + 30 px), pero en cambio, todos los márgenes se colapsan en un solo margen de 40 px (el más alto de los tres). Esto es útil en la mayoría de los casos, ya que no es necesario redefinir ninguno de los márgenes superiores para eliminar el espacio vertical adicional.

Márgenes negativos

Como puede sospechar, mientras que un valor de margen positivo aleja a otros elementos, un margen negativo arrastrará al elemento en esa dirección o atraerá a otros elementos hacia él.

Aquí hay un ejemplo de un contenedor con relleno, y el encabezado h2 tiene márgenes negativos que atraviesan ese relleno hasta los bordes:

Consulte el
caso de uso más común del lápiz para márgenes negativos de Chris Coyier (@chriscoyier)
en CodePen.

A continuación, se muestra un ejemplo en el que el primer párrafo tiene un margen inferior negativo, lo que contrae el siguiente párrafo.

Vea el
párrafo inferior del margen negativo de la pluma de Chris Coyier (@chriscoyier)
en CodePen.

Soporte del navegador

Cromo	Safari	Firefox	Ópera	ES DECIR	Androide	iOS
Trabajos	Trabajos	Trabajos	Trabajos	Trabajos	Trabajos	Trabajos

IE6 es propenso al error de margen flotante duplicado, que se puede resolver en la mayoría de los casos agregando display: inlineal elemento flotante.