Usar margin y padding en CSS

1. Introducción de margen en CSS
2. Introducción de Padding en CSS

El margen y el relleno pueden parecer similares en CSS, pero son diferentes. Este tutorial presentará el margen y el relleno en CSS. Entonces sabremos la diferencia entre ellos y aprenderemos cuándo usar el margen y el relleno.

Introducción de margen en CSS

En CSS, el margen es el espacio entre dos elementos adyacentes. Es el espacio entre el borde de los dos elementos adyacentes. El margen de cualquier elemento no controla el espacio dentro del elemento. Más bien, es responsable del espacio justo fuera del elemento. Usamos la propiedad margin para especificar el margen de los cuatro lados del elemento. Escribimos cuatro valores en la propiedad margin. Los valores representan margin-top, margin-right, margin-bottom y margin-left en orden. Podemos ilustrar como sigue.

element {
margin: 20px 20px 20px 20px;
}

El código anterior establece el margen 20px de un elemento de los cuatro lados.

Cuando usamos solo los tres valores, el valor en el medio representa las propiedades margin-left y margin-right. Si la propiedad margin tiene solo dos valores, el primer valor representa el margen en la parte superior e inferior, y el segundo representa el margen en la izquierda y la derecha. Un valor de margen único representa el margen en los cuatro lados.

Ahora, demostremos qué es un margen. Por ejemplo, cree dos div con redbox y bluebox como sus clases. Asigne height y width de 200px a cada una de las clases. Establezca el background-color de los cuadros en red y blue. Luego, establezca la propiedad margin-bottom del redbox, el cuadro superior, en 20px.

El siguiente ejemplo crea dos cuadros de colores rojo y azul. La propiedad margin-bottom proporciona un espacio de 20px desde el borde del cuadro rojo en la dirección inferior. Significa que el cuadro azul tendrá una distancia de 20px del cuadro rojo. Si eliminamos la propiedad margin-bottom, el espacio se eliminará y los dos cuadros se adjuntarán. Tenga en cuenta que los textos de ambos recuadros se adjuntan al borde de los recuadros sin espacios a la izquierda ni a la parte superior.

Código de ejemplo:

<div class="redbox"> Red Box </div>
<div class="bluebox"> Blue Box </div>

.redbox {
 height:200px;
 width: 200px;
 background-color:red;
 margin-bottom:20px;
}

.bluebox {
 height:200px;
 width: 200px;
 background-color:blue;
 color:white;
}

Podemos usar el margen CSS si queremos cambiar la posición de un elemento en nuestra página web. Usando la propiedad de margen, podemos mover el elemento hacia la izquierda, derecha, arriba y abajo. Otro uso del margen viene cuando necesitamos especificar la distancia entre dos elementos cercanos. Lo hemos ilustrado en el ejemplo anterior. Incluso podemos usar el valor del margen negativo en elementos para crear un efecto de superposición. Estos son algunos casos de uso del margen CSS.

Introducción de Padding en CSS

El relleno es el espacio entre el borde de un elemento y el contenido del elemento. Es el espacio dentro de un elemento y no tiene control sobre el área fuera del elemento. Usamos la propiedad padding para establecer el padding de un elemento. Podemos usar cuatro valores, tres valores, dos valores y un solo valor para representar el relleno de un elemento. La representación de relleno es similar a la representación de margen en términos de direcciones. Podemos ilustrar como sigue.

margin: 20px 20px 20px 20px;

El código anterior establece el relleno de 20px en todas las direcciones.

Ahora demostremos el uso práctico del relleno CSS con un ejemplo. Usaremos la misma estructura HTML que la anterior aquí. En CSS, seleccione div y asigne una altura y un ancho de 200px y padding-top de 50px. Seleccione las clases individuales y déles el valor respectivo para la propiedad background-color.

En el ejemplo siguiente, se adjuntan las dos casillas, a diferencia del ejemplo de margen anterior. Pero podemos ver algo de espacio sobre cada texto en ambos cuadros. Esto es lo que hace el acolchado. Establecer la propiedad padding-top en 20px ha agregado un espacio de 50px desde el texto hasta la parte superior del cuadro.

Código de ejemplo:

<div class="redbox"> Red Box </div>
<div class="bluebox"> Blue Box </div>

div{
 height:200px;
 width: 200px;
 padding-top:50px;
}
.redbox {
 background-color:red;
}

.bluebox {
 background-color:blue;
 color:white;
}

Podemos usar el relleno CSS para especificar el espacio entre el contenido de un elemento y su borde. También podemos usar padding para aumentar el tamaño del elemento. Cuando aumentamos el valor de relleno, aumenta el espacio entre el contenido y el borde. Como resultado, el tamaño del elemento también aumentará, manteniendo constante el tamaño del contenido.