Modelo de cuadro: Margen CSS

El espacio en blanco alrededor del borde del elemento es el margen. Establecer el margen crea un espacio adicional "en blanco" fuera del elemento.

La forma más sencilla de establecer un margen es utilizando el atributo margen, que acepta cualquier unidad de longitud, valores porcentuales e incluso valores negativos.

Atributo de margen CSS

La forma más sencilla de establecer un margen es utilizando Atributo margen.

El atributo margen acepta cualquier unidad de longitud, puede ser píxeles, pulgadas, milímetros o em.

El margen puede establecerse en auto. La práctica más común es establecer un valor de longitud para el margen. La siguiente declaración establece un espacio de 1/4 pulgada en anchura en los lados del elemento h1:

h1 {margen: 0.25in;}

El siguiente ejemplo define diferentes márgenes para los cuatro lados del elemento h1, utilizando la unidad de longitud píxeles (px):

h1 {margen: 10px 0px 15px 5px;}

Al igual que en la configuración del relleno interno, el orden de estos valores comienza con el margen superior (top) y rodea el elemento en el sentido de las agujas del reloj:

margen: top right bottom left

Además, también se puede establecer un valor porcentual para el margen:

p {margen: 10%;}

Los porcentajes son calculados en relación con el width del elemento padre. En el ejemplo anterior, el margen del elemento p es el 10% del width del elemento padre.

El valor predeterminado de margen es 0, por lo que si no se declara un valor para margen, no aparecerá el margen. Sin embargo, en la práctica, los navegadores ya han proporcionado estilos predeterminados para muchos elementos, y el margen no es una excepción. Por ejemplo, en los navegadores que admiten CSS, se generan 'espacios en blanco' encima y debajo de cada elemento de párrafo. Por lo tanto, si no se declara el margen para el elemento p, el navegador puede aplicar un margen por sí solo. Por supuesto, siempre y cuando se declare especialmente, se cubrirá el estilo predeterminado.

Copia de valores

¿Recuerda? Hemos mencionado anteriormente la copia de valores en las dos secciones anteriores. A continuación, le explicamos cómo utilizar la copia de valores.

A veces, ingresamos algunos valores repetidos:

p {margen: 0.5em 1em 0.5em 1em;}

A través de la copia de valores, no es necesario repetir estos números. Las reglas anteriores son equivalentes a las siguientes reglas:

p {margen: 0.5em 1em;}

Estos 2 valores pueden reemplazar los 4 valores anteriores. ¿Cómo se hace esto? CSS define algunas reglas que permiten especificar menos de 4 valores para el margen. Las reglas son las siguientes:

  • Si falta el valor del margen izquierdo, se utiliza el valor del margen derecho.
  • Si falta el valor del margen inferior, se utiliza el valor del margen superior.
  • Si falta el valor del margen derecho, se utiliza el valor del margen superior.

La siguiente imagen proporciona una manera más intuitiva de entender esto:

Copia de valores CSS

En otras palabras, si se especifican 3 valores para el margen, el cuarto valor (es decir, el margen izquierdo) se copia desde el segundo valor (margen derecho). Si se proporcionan 2 valores, el cuarto valor se copia desde el segundo valor, y el tercer valor (margen inferior) se copia desde el primer valor (margen superior). En el último caso, si se proporciona solo un valor, los otros 3 márgenes se copian de este valor (margen superior).

Utilizando este mecanismo simple, solo necesita especificar los valores necesarios, sin aplicar todos los 4 valores, por ejemplo:

h1 {margen: 0.25em 1em 0.5em;}	/* equivalente a 0.25em 1em 0.5em 1em */
h2 {margen: 0.5em 1em;}	/* equivalente a 0.5em 1em 0.5em 1em */
p {margin: 1px;}			/* equivalente a 1px 1px 1px 1px */

Este método tiene una pequeña desventaja, con la que肯定会遇到这个问题。Supongamos que desea establecer el margen superior y el margen izquierdo del elemento p en 20 píxeles, y el margen inferior y el margen derecho en 30 píxeles. En este caso, debe escribirse:

p {margin: 20px 30px 30px 20px;}

Así es como se obtiene el resultado deseado. Lamentablemente, en este caso, no hay manera de reducir el número de valores necesarios.

Vamos a ver otro ejemplo. Si desea que todos los márgenes excepto el margen izquierdo sean auto (el margen izquierdo es 20px):

p {margin: auto auto auto 20px;}

Del mismo modo, así es como se obtiene el efecto deseado. El problema es que escribir estos auto es un poco molesto. Si solo desea controlar el margen unidireccional de un elemento, use el atributo de margen unidireccional.

Atributos de margen unidireccional

Puede usar atributos de margen unidireccional para establecer valores de margen unidireccional en un elemento. Supongamos que desea establecer el margen izquierdo del elemento p en 20px. No es necesario usar margin (escribe mucho auto), sino que puede usar el siguiente método:

p {margin-left: 20px;}

Puede usar cualquiera de los siguientes atributos para establecer el margen superior correspondiente sin afectar todos los otros márgenes:

Se pueden usar varios de estos atributos unidireccionales en una regla, por ejemplo:

h2 {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
  }

Claro, en este caso, usar margin puede ser más fácil:

p {margin: 20px 30px 30px 20px;}

Independientemente de si se utiliza un atributo unidireccional o margin, los resultados son los mismos. Generalmente, si desea establecer el margen para varios lados, usar margin es más fácil. Sin embargo, desde el punto de vista de la visualización del documento, en realidad no importa qué método se utilice, por lo que debe elegir el método que le resulte más fácil.

Consejos y comentarios

Consejo:Netscape y IE definen el valor predeterminado de margen (margin) para la etiqueta body como 8px. Opera no es así. Por el contrario, Opera define el valor predeterminado de relleno interno (padding) como 8px, por lo que si desea ajustar los bordes de todo el sitio web y mostrarlos correctamente en Opera, debe personalizar el padding de body.

Ejemplo de margen externo en CSS:

Establecer el margen izquierdo externo del texto
Este ejemplo muestra cómo establecer el margen izquierdo del texto.
Establecer el margen derecho del texto
Este ejemplo muestra cómo establecer el margen derecho del texto.
Establecer el margen superior del texto
Este ejemplo muestra cómo establecer el margen superior del texto.
Establecer el margen inferior del texto
Este ejemplo muestra cómo establecer el margen inferior del texto.
Todos los atributos de margen en una declaración.
Este ejemplo muestra cómo establecer todos los atributos de margen en una declaración.

Atributo de margen externo CSS

Atributo Descripción
margin Atributo abreviado. Establecer todos los atributos de margen en una declaración.
margin-bottom Establecer el margen inferior externo del elemento.
margin-left Establecer el margen izquierdo externo del elemento.
margin-right Establecer el margen derecho externo del elemento.
margin-top Establecer el margen superior externo del elemento.