Márgenes y rellenos con CSS

Márgenes y rellenos con CSS

Márgenes y rellenos con CSS

En estilos en cascada los márgenes y rellenos son los atributos que manejan el espacio transparente alrededor de un elemento, mediante su uso se hace evidente la separación entre elementos.

El relleno (padding) es el espacio encontrado entre el contenido y el borde de la caja, mientras que el margen (margin) es el espacio que va del borde de la caja hacia el exterior.

Elemento de HTML

Aplicación

Los márgenes y rellenos con CSS se pueden aplicar por cada lado de forma independiente. El atributo se forma mediante las palabras margin para margen o padding para relleno e indicando el lado que se desea modificar por medio de un guión medio () y la palabra en inglés del lado que deseamos afectar:

top (superior), -right (derecho), -bottom (inferior) o -left (izquierdo)

margin-top: 20px;
padding-left: 10px;

Atajos para márgenes y rellenos

No es una buena práctica escribir cuatro atributos para margen y otros tantos para el relleno de la caja. En vez de ello utilizamos los atributos margin para el margen y padding para el relleno.

Los valores se especifican mediante alguna de las siguientes formas:

1. Un valor para cada lado:

En este esquema, el valor del atributo se conforma por medio de cuatro elementos, separados entre sí por un espacio en blanco.

El orden de cada uno de estos elementos se establece comenzando con la parte superior del elemento y siguiendo el giro de las manecillas del reloj, de forma que le primer valor corresponde al lado superior, el segundo al lado derecho, el tercero al lado inferior y el último al lado izquierdo.

margin-padding-4
Valor con cuatro elementos

2. Un valor para el lado superior, otro para los lados izquierdo y derecho y otro para el lado inferior:

En este esquema, el valor del atributo se conforma de tres elementos, el primero para el lado superior, el segundo para los costados (lados izquierdo y derecho), mientras que el tercero es para el lado inferior, todos ellos separados por un espacio en blanco.

margin-padding-3
Valor con tres elementos

3. Un valor para los lados superior en inferior y otro para los lados izquierdo y derecho:

En este esquema, el valor del atributo se conforma de dos elementos, el primero para el lado superior e inferior y el segundo para los costados (lados izquierdo y derecho), separados por un espacio en blanco.

margin-padding-2
Valor con dos elementos

4. Un valor para los cuatro lados:

En este esquema, un solo valor corresponde a los cuatro lados.

margin-padding-1
Valor con un solo elemento

Margen automático

Para el margen horizontal se puede utilizar un valor especial (auto),  que centra el elemento con relación a su elemento padre (quien lo envuelve).

Para aplicarlo es necesario que el elemento sea de tipo bloque y tenga establecido un ancho específico:

See the Pen centrado_h by Miguel Méndez (@codigo-web) on CodePen.0

Conclusión

Mediante el uso de márgenes y rellenos con CSS asignamos espacio transparente para marcar la separación entre elementos.

Ya que su finalidad es my similar (agregar espacio transparente), una pregunta frecuente es cuando emplear margen y cuando ocupar relleno. Por lo general aplicamos margen para separar elementos hermanos y rellenos para establecer la separación entre elementos padre y sus elementos hijos.

See the Pen uso_margin_padding by Miguel Méndez (@codigo-web) on CodePen.0

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.
¿Te fue útil el artículo? Por favor ayúdanos a difundirlo compartiéndolo a través de tus redes sociales.

Autor: Miguel Méndez

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.

Déjanos un comentario

Sé el primero en comentar

avatar
wpDiscuz