texto - que es margin y padding en css

Cuándo usar margen vs relleno en CSS

Question

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 ?

Answer 1

Cuándo usar márgenes y relleno

Hay dos formas en CSS para crear espacio alrededor de sus elementos: márgenes y relleno. En la mayoría de los escenarios de uso, son funcionalmente idénticos, pero en realidad, se comportan de formas ligeramente diferentes. Existen diferencias importantes entre los márgenes y el relleno que debe tener en cuenta al elegir cuál usar para mover elementos alrededor de la página. Sin embargo, en aquellos casos en los que los márgenes o el relleno se podrían usar para el mismo efecto, gran parte de la decisión se reduce a las preferencias personales.

Cuando usar márgenes

1. Desea que su espaciado aparezca fuera del "cuadro" creado por una propiedad de borde. Los márgenes se encuentran fuera de los límites, por lo que los usaría si desea que su borde permanezca en un solo lugar. Esto puede ser útil si, por ejemplo, tiene una barra lateral con un borde que desea alejar de su área de contenido principal.

2. No quieres que el color de fondo o la imagen invadan tu espacio personal. Los colores de fondo y las imágenes se detienen en el borde, por lo que si prefiere mantener sus fondos fuera del espacio que está haciendo, los márgenes son la propiedad que desea.

3. Te gustaría tener un espacio plegable en la parte superior e inferior de tu elemento. Los márgenes superior e inferior se comportan de manera diferente a los márgenes laterales, ya que si dos márgenes están uno encima del otro, se colapsan al tamaño del mayor conjunto de márgenes. Por ejemplo, si configuro el párrafo para que tenga un margen superior de 20 píxeles y un margen inferior de 15 píxeles, solo tendré un total de 20 píxeles de espacio entre los párrafos (los dos márgenes se colapsan entre sí, y el más grande gana) .

Cuándo usar el relleno

1. Desea que todo el espacio que está creando esté dentro de su borde. El relleno está contenido dentro de sus bordes, por lo que es útil para alejar los bordes del contenido dentro de su elemento.

2. Necesita el color / imagen de fondo para continuar en el espacio que está creando. Tu fondo continuará detrás de tu relleno, así que solo úsalo si quieres que tu fondo se vea.

3. Usted quiere que su espacio superior e inferior se comporten de manera más rígida. Por ejemplo, si configura los párrafos de su documento para que tengan un relleno superior de 20 píxeles y un relleno inferior de 15 píxeles, entonces, cada vez que tenga dos párrafos seguidos, tendrán un total de 35 píxeles de espacio. entre ellos.

Answer 2

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.

Answer 3

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>

Answer 4

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

• El margen es el 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 de contenido + relleno + borde.

Answer 5

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.

Answer 6

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.

Answer 7

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

Answer 8

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.

Answer 9

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

Answer 10

Hay más explicaciones técnicas para su pregunta, pero si está buscando una manera de pensar en el margen y el relleno que lo ayudará a elegir cuándo y cómo usarlos, esto podría ayudar.

Compara los elementos del bloque con las imágenes colgadas en una pared:

• La ventana del navegador es igual que la pared.
• El contenido es como una fotografía.
• El margen es como el espacio de la pared entre las imágenes enmarcadas.
• El acolchado es como la alfombra alrededor de una foto.
• El borde es igual que el borde en un marco.

Al decidir entre margen y relleno, es una buena regla empírica utilizar el margen cuando se está espaciando un elemento en relación con otras cosas en la pared, y el relleno cuando se ajusta la apariencia del elemento en sí. El margen no cambiará el tamaño del elemento, pero el relleno normalmente hará que el elemento sea más grande ¹ .

¹ Este modelo de caja predeterminado se puede modificar con el atributo de box-sizing .

Answer 11

Lo mejor que he visto explicando esto con ejemplos, diagramas e incluso una vista de "pruébalo tú mismo" está here .

El siguiente diagrama creo que proporciona una comprensión visual instantánea de la diferencia.

Una cosa a tener en cuenta es que los navegadores que cumplen con los estándares (las peculiaridades de IE son una excepción ) representan solo la porción de contenido al ancho dado, así que manténlo al tanto de los cálculos de diseño. También tenga en cuenta que el cuadro de borde está viendo algo así como una reaparición con Bootstrap 3 que lo admite.

Answer 12

Lo que pasa con los márgenes es que no necesita preocuparse por el ancho del elemento.

Al igual que cuando le das algo a {padding: 10px;} , tendrás que reducir el ancho del elemento en 20px para mantener el '' ajuste '' y no molestar a otros elementos a su alrededor.

Así que generalmente comienzo usando rellenos para hacer que todo esté " packed " y luego uso márgenes para pequeños ajustes.

Otra cosa a tener en cuenta es que los rellenos son más consistentes en diferentes navegadores e IE no trata muy bien los márgenes negativos.

Answer 13

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

1) Margen

Las propiedades del 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.
Existen 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 utilizan para generar espacio alrededor del contenido.
El relleno borra un área alrededor del contenido (dentro del borde) de un elemento.
Con CSS, tienes control total sobre el relleno. Existen propiedades 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 los codemancers muestra cómo los márgenes y los bordes se juntan y cómo el cuadro de borde y el cuadro de contenido lo hacen diferente.

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

• Contenido : esto define el área de contenido del cuadro donde se encuentra el contenido real, como texto, imágenes u 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.

Answer 14

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

Answer 15

Yo siempre uso este principio:

Este es el modelo de caja de la función de elemento de inspección en Firefox. Funciona como una cebolla.

• Tu contenido está en el medio.
• El relleno es el espacio entre el contenido y el borde de la etiqueta que está dentro.
• La frontera y sus especificaciones.
• El margen es el espacio alrededor de la etiqueta.

Así que márgenes más grandes harán más espacio alrededor de la caja que contiene su contenido.

El relleno más grande aumentará el espacio entre su contenido y la caja de la que está dentro.

Ninguno de ellos aumentará o disminuirá el tamaño de la caja si se establece en un valor específico.

Answer 16

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

Answer 17

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.

Answer 18

TL; DR: De manera predeterminada, uso el margen en todas partes, excepto cuando tengo un borde o fondo y quiero aumentar el espacio dentro de ese cuadro visible.

Para mí, la mayor diferencia entre el relleno y el margen es que los márgenes verticales se contraen automáticamente y el relleno no. Considere dos elementos uno encima del otro, cada uno con relleno de 1em. Este relleno se considera parte del elemento y siempre se conserva. Así que terminará con el contenido del primer elemento, seguido del relleno del primer elemento, seguido del relleno del segundo elemento, seguido del contenido del segundo elemento. Así, el contenido de los dos elementos terminará separándose.

Ahora reemplaza ese relleno con 1em de margen. Se considera que los márgenes están fuera del elemento, y los márgenes de los elementos adyacentes se superpondrán. Entonces, en este ejemplo, terminará con el contenido del primer elemento seguido de 1em de margen combinado seguido del contenido del segundo elemento. Así que el contenido de los dos elementos es solo 1em aparte.

Esto puede ser realmente útil cuando sabes que quieres decir 1em de espaciado alrededor de un elemento, independientemente del elemento que esté al lado.

Las otras dos grandes diferencias son que el relleno se incluye en la región de clic y el color / imagen de fondo, pero no el margen.