padding que es - Cuándo usar margen vs relleno en CSS




9 Answers

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

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

margin margenes html

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




MARGEN vs PADDING :

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

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

Por favor, consulte la imagen de abajo extraída de Margin Vs Padding - CSS Properties




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

$(".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 borra un área alrededor del contenido (dentro del borde) de un elemento.

significa que su elemento no conoce sus márgenes externos, por lo que si está desarrollando controles web dinámicos, le recomiendo que use relleno contra el margen, si puede.

Tenga en cuenta que algunas veces hay que usar margen.




Explicación de las diferentes partes:

Contenido: el contenido del cuadro, donde aparecen el texto y las imágenes.

Relleno: limpia un área alrededor del contenido. El relleno es transparente.

Borde: un borde que gira alrededor del relleno y el contenido

Margen: limpia un área fuera de la frontera. El margen es transparente.

Aquí está el ejemplo en vivo: (jugar con cambiar los valores) http://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel




Margen avanzado versus relleno explicado

No es apropiado usar el padding para espaciar el contenido en un elemento; debe utilizar margin en el elemento hijo en su lugar. Los navegadores más antiguos, como Internet Explorer, malinterpretaron el modelo de caja, excepto cuando se trataba de usar un margin que funciona perfectamente en Internet Explorer 4 .

Hay dos excepciones cuando es apropiado usar el padding :

  1. Se aplica a un elemento en línea que no puede contener ningún elemento secundario, como un elemento de entrada.

  2. Está compensando un error de navegador muy variado que un proveedor * tose * Mozilla * tose * se niega a solucionar y está seguro (en la medida en que realice intercambios regulares con los editores de W3C y WHATWG) que debe tener una solución funcional y esta solución no afectará el estilo de ninguna otra cosa que no sea el error que está compensando.

Cuando tienes un elemento de 100% de ancho con padding: 50px; efectivamente obtienes width: calc(100% + 100px); . Como el margin no se agrega al width , no causará problemas de diseño inesperados cuando use el margin en child elements lugar de padding directamente en el elemento.

Por lo tanto, si no está haciendo una de esas dos cosas, no agregue relleno al elemento, sino a su (s) elemento (s) hijo (s) directo (s) para asegurarse de que obtendrá el comportamiento esperado en todos los navegadores.




Es bueno saber las diferencias entre margin y padding . Aquí hay algunas diferencias:

  • El margen es el espacio exterior de un elemento, mientras que el relleno es el espacio interior de un elemento.
  • El margen es el espacio fuera del borde de un elemento, mientras que el relleno es el espacio dentro del borde de un elemento.
  • Margin acepta el valor de auto: margin: auto , pero no puede configurar Padding en auto.
  • El margen se puede establecer en cualquier número, pero el relleno no debe ser negativo.
  • Cuando aplique estilo a un elemento, también afectará al relleno (por ejemplo, el color de fondo), pero no al margen.



Margen

El margen se suele utilizar 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 sin espacios en blanco.

Relleno

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

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




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






Related