Margen vs Relleno - ¿Cuál es la diferencia?
Margin vs Padding son dos propiedades CSS similares, pero diferentes. Ambos valores se utilizan cuando se trata de hacer que el diseño y el diseño de un sitio web sean atractivos.
¿Para qué se necesita el margen y el relleno?
Los sitios web se vuelven más claros cuando elementos como campos de texto, encabezados, botones o imágenes tienen marcos y se proporcionan a cierta distancia entre sí. Esto es posible con los valores o propiedades Margin y Padding .
Margen frente a relleno: el relleno (verde, a la izquierda) determina el margen interior. El margen (rojo, derecho) determina la distancia al exterior
En detalle: margen
Puede utilizar el valor Margen para crear espacios entre dos elementos HTML. Por lo tanto, es el espacio vacío en el medio (también llamado espacio en blanco). Importante: Esto siempre se refiere a la frontera de un elemento a la frontera de su elemento vecino - por así decirlo, la distancia al "exterior".
El margen generalmente se da en px (píxeles) o % (porcentaje) y se puede configurar individualmente para los cuatro lados (arriba en el sentido de las agujas del reloj, derecha, abajo, izquierda).
En detalle: acolchado
El relleno de valor CSS también se utiliza para establecer el relleno del contenido de un elemento HTML. Sin embargo, el relleno se refiere al borde del mismo elemento y, por lo tanto, a la distancia al "interior".
Sin relleno, el contenido, por ejemplo, un pasaje de texto, se "pegaría" directamente a su borde. Esto no daría una buena imagen visualmente.
Al igual que con margin, también es común que padding especifique los valores en píxeles o porcentaje . El relleno visual se puede definir para los cuatro lados de un elemento (arriba en el sentido de las agujas del reloj, derecha, abajo, izquierda).
Margen vs Padding usando ejemplos
A continuación se describen cuatro casos de estudio para ilustrar la diferencia.
1er ejemplo: sin margen/relleno:
HTML:
Resultado:
Fuente: Representación propia con Visual Studio Code
<head>
<style>
div{
background-color: lightgrey;
border-radius: 10px;
width: 400px;
border: 2px solid black;
}
div{
background-color: lightblue;
border-radius: 10px;
width: 400px;
border: 2px solid black;
}
</style>
</head>2do ejemplo: solo margen
HTML:
Resultado:
Fuente: Representación propia con Visual Studio Code
<head>
<style>
div{
background-color: lightgray;
border-radius: 10px;
width: 400px;
border: 2px solid black;
margin: 20px;
}
div{
background-color: lightblue;
border-radius: 10px;
width: 400px;
border: 2px solid black;
margin: 20px;
}
</style>
</head>3. Ejemplo: solo relleno
Resultado:
Fuente: Representación propia con Visual Studio Code
HTML:
<head>
<style>
div{
background-color: lightgray;
border-radius: 10px;
width: 300px;
border: 2px solid black;
padding: 20px;
}
div{
background-color: lightblue;
border-radius: 10px;
width: 300px;
border: 2px solid black;
padding: 50px;
}
</style>
</head>4to ejemplo: con margen y relleno
Resultado:
Fuente: Representación propia con Visual Studio Code
HTML:
<head>
<style>
div{
background-color: lightgray;
border-radius: 10px;
width: 300px;
border: 2px solid black;
padding: 50px;
margin: 20px;
}
div{
background-color: lightblue;
border-radius: 10px;
width: 300px;
border: 2px solid black;
padding: 40px;
margin: 30px;
}
</style>
</head>Debes tener en cuenta que
- Mientras que el relleno expande el tamaño de un elemento , el margen no lo hace (vea el ejemplo 3).
- El relleno se puede considerar parte del elemento . A continuación, el contenido del elemento se rellena hasta el borde mediante relleno. Luego, esto está bordeado por el relleno del siguiente elemento, seguido por el contenido de este elemento. Por ejemplo, si el relleno de ambos elementos es de 10 px cada uno, el contenido respectivo de los dos elementos está separado por 20 px.
- Por el contrario, se considera que el margen está fuera del elemento . Si ahora reemplaza el relleno de 10 px con un margen de 10 px, los dos márgenes se superponen y la distancia entre los dos elementos se reduce. Porque: el contenido del primer elemento va seguido de un borde superpuesto de 10 px, seguido del contenido del segundo elemento. En este caso, los contenidos de los dos elementos están a solo 10 px de distancia.
- En consecuencia, la distancia entre dos elementos se compone de la siguiente manera: padding(Element1) + max (margin (Element1), margin(Element2)) + padding(Element2) .
- Mientras que el relleno se adapta igualmente a los cambios en el diseño del elemento (por ejemplo, color, fondo), el margen no se ve afectado por estos cambios.
- El margen se puede establecer en cualquier tamaño, incluidos los números negativos. Padding, por su parte, no acepta tamaños negativos .
- Margin acepta el valor auto (margin:auto). Padding no acepta este valor. Si Margen está configurado en automático , el elemento se centrará horizontalmente dentro del contenedor. El elemento ocupa el ancho especificado por el valor de ancho. A continuación, el espacio restante se divide por igual entre el margen derecho e izquierdo.
Deja una respuesta