Cuándo utilizar margen vs relleno en CSS


Answers

El margen está en el exterior de los elementos del bloque mientras que el relleno está en el interior.

  • Use margen para separar el bloque de las cosas fuera de él
  • Use relleno para alejar el contenido de los bordes del bloque.

Question

Al escribir CSS, ¿hay alguna regla o directriz particular que deba usarse para decidir cuándo usar el margin y cuándo usar el padding ?




Primero veamos cuáles son las diferencias y cuál es cada responsabilidad:

1) Margen

Las propiedades de margen de CSS se utilizan para generar espacio alrededor de los elementos.
Las propiedades de margen establecen el tamaño del espacio en blanco fuera del borde. Con CSS, tienes control total sobre los márgenes.
Hay propiedades CSS para establecer el margen para cada lado de un elemento (arriba, derecha, abajo e izquierda).


2) Relleno

Las propiedades de relleno de CSS se usan para generar espacio alrededor del contenido.
El relleno limpia un área alrededor del contenido (dentro del borde) de un elemento.
Con CSS, tienes control total sobre el relleno. Hay propiedades de CSS para configurar el relleno para cada lado de un elemento (arriba, derecha, abajo e izquierda).

Así que, simplemente, los márgenes son espacios alrededor de los elementos, mientras que los rellenos son espacios alrededor del contenido que forman parte del elemento.

Esta imagen de codemancers muestra cómo el margen y los bordes se unen y cómo border box y content-box lo hacen diferente.

También definen cada sección de la siguiente manera:

  • Contenido : define el área de contenido del cuadro donde reside el contenido real, como texto, imágenes o tal vez otros elementos.
  • Relleno : esto borra el contenido principal de su caja contenedora.
  • Borde : esto rodea tanto el contenido como el relleno.
  • Margen : esta área define un espacio transparente que lo separa de otros elementos.



Una cosa a tener en cuenta es cuando los márgenes de colapso automático te molestan (y no estás usando colores de fondo en tus elementos), algo es más fácil de usar.




Margen

El margen generalmente se utiliza para crear un espacio entre el elemento en sí y su entorno.

por ejemplo, lo uso cuando estoy construyendo una barra de navegación para que se adhiera a los bordes de la pantalla y para que no haya espacio blanco.

Relleno

Normalmente uso cuando tengo un elemento dentro de un borde, <div> o algo similar, y quiero disminuir su tamaño, pero en el momento quiero mantener la distancia o el margen entre los otros elementos a su alrededor.

Tan brevemente, es situacional; Depende de lo que estés tratando de hacer.




El margen de CSS, el relleno y el borde son propiedades del modelo de caja.

  • El margen es espacio fuera del contenido.
  • El relleno es espacio dentro del contenido.
  • El borde es un contorno visible (cualquier color, estilo y ancho) fuera del relleno.

Ancho total = ancho del contenido + relleno + borde.




MARGIN vs PADDING :

  1. El margen se usa en un elemento para crear distancia entre ese elemento y otros elementos de la página. Donde el relleno se usa para crear una distancia entre el contenido y el borde de un elemento.

  2. El margen no es parte de un elemento donde el relleno es parte del elemento.

Consulte a continuación la imagen extraída del margen Vs Padding - Propiedades de CSS




Aquí hay un poco de HTML que demuestra cómo el padding y el margin afectan la capacidad de clics y el llenado de fondo. Un objeto recibe clics en su relleno, pero hace clic en un área con margen de objetos para ir a su elemento primario.

$(".outer").click(function(e) {
  console.log("outer");
  e.stopPropagation();
});

$(".inner").click(function(e) {
  console.log("inner");
  e.stopPropagation();
});
.outer {
  padding: 10px;
  background: red;
}

.inner {
  margin: 10px;
  padding: 10px;
  background: blue;
  border: solid white 1px;
}
<script src="http://code.jquery.com/jquery-latest.js"></script>

<div class="outer">
  <div class="inner" style="position:relative; height:0px; width:0px">

  </div>
</div>




El margen borra un área alrededor de un elemento (fuera del borde), pero el relleno limpia un área alrededor del contenido (dentro del borde) de un elemento.

significa que su elemento no sabe acerca de sus márgenes externos, por lo que si está desarrollando controles web dinámicos, le recomiendo que use relleno vs margen si puede.

tenga en cuenta que algunas veces debe usar margen.




El margen está fuera de la caja y el relleno está dentro de la caja






Related