En este artículo, explicaremos la diferencia entre el relleno CSS y el margen .
Margen: Es el espacio alrededor de un elemento. Los márgenes se utilizan para mover un elemento hacia arriba o hacia abajo en una página, así como hacia la izquierda o hacia la derecha. El margen es completamente transparente y no tiene ningún color de fondo. Limpia el área alrededor del elemento. Cada lado del elemento tiene un tamaño de margen que puede cambiar individualmente. Al crear el espacio, el margen aleja los elementos adyacentes.
Relleno: Es el espacio entre el elemento y el contenido relacionado dentro de él. Determina cómo se ven y se sientan los elementos dentro de un contenedor. También muestra el fondo del contenedor alrededor del elemento que contiene. El relleno puede verse afectado por los colores de fondo, ya que borra el área alrededor del contenido. Para crear la brecha, aumenta el tamaño del elemento o reduce el contenido del interior. Por defecto, el tamaño del elemento aumenta.
¿Cuándo usar margen y relleno?
- Cuando esté ajustando el diseño de su diseño, deberá determinar si ajustar los márgenes o el relleno. Si el ancho de tu página es fijo, centrar un elemento horizontalmente es muy sencillo, solo asigna el valor margin: auto . También usaría el margen para establecer la distancia entre elementos cercanos.
- Cambiaría el relleno si desea crear el espacio entre el elemento y el borde del contenedor o borde.
Nota: Los márgenes se utilizan para agregar espacios entre una imagen y la descripción de esa imagen.
CSS Padding se usa si queremos crear un espacio entre un elemento y el borde del contenedor o el borde. También es útil en el requisito de cambiar el tamaño del elemento.
Código CSS:
.center {
margin: auto;
background: lime;
width: 66%;
}
.outside {
margin: 3rem 0 0 -3rem;
background: cyan;
width: 66%;
}
Código completo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
background: lime;
width: 66%;
}
.outside {
margin: 3rem 0 0 -3rem;
background: cyan;
width: 66%;
}
</style>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<p class="center">This element is centered.</p>
<p class="outside">The element is positioned outside of its corner.</p>
</body>
</html>
Producción:
Esquina exterior del elemento
Nota: cuando hay un aumento en el valor de relleno, el texto seguirá siendo el mismo, pero el espacio circundante aumentará.
Código CSS:
h4 {
background-color: lime;
padding: 20px 50px;
}
h3 {
background-color: cyan;
padding: 110px 50px 50px 110px;
}
Código completo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h4 {
background-color: lime;
padding: 20px 50px;
}
h3 {
background-color: cyan;
padding: 110px 50px 50px 110px;
}
</style>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<h4>This element has moderate padding.</h4>
<h3>The padding is huge in this element!</h3>
</body>
</html>
Producción:
acolchado moderado y grande
La diferencia tabular entre Padding y Margin.
| Margen | Relleno |
| El espacio exterior de un elemento, es decir, el margen, es el espacio fuera del borde. | El espacio interior de un elemento, es decir, el relleno, es el espacio dentro del borde del elemento. |
| Puede ser negativo o cualquier número flotante. | No permite valores negativos. |
| Podemos establecer el margen en automático. | No podemos establecer el relleno en automático. |
| El estilo de un elemento como el color de fondo no afecta el margen. | El relleno se ve afectado por el estilo de un elemento, como el color de fondo. |
Los diferentes atributos de margen y relleno.
Publicación traducida automáticamente
Artículo escrito por akashpandit1103 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA