una - quitar margen css




Cuándo usar margen vs relleno en CSS (12)

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.

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

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 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.


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.


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


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.

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 1 .

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


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.


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.

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.


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


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.







margin