wikipediaillustrated

marketing

Margen CSS vs. Relleno: ¿Cuál es la diferencia?

css margin vs padding.jpegkeepProtocol

Si eres nuevo en CSS, es posible que hayas escuchado las palabras margen y relleno pero no está muy seguro de lo que significan o cómo usarlos en los diseños de su sitio web. Estos conceptos hacen cosas similares en CSS. Sin embargo, no son exactamente iguales y existen importantes diferencias fundamentales en su uso.

Una vez que comprenda completamente la diferencia entre márgenes y relleno, podrá tomar mejores decisiones de diseño para su sitio web. Así que echemos un vistazo a estas dos propiedades y lo que hacen. Incluiremos muchos ejemplos visuales para ilustrar cómo funcionan estos importantes componentes de CSS.

¿Cuál es la diferencia entre margen y relleno en CSS?

En CSS, un margen es el espacio alrededor del borde de un elemento, mientras que el relleno es el espacio entre el borde de un elemento y el contenido del elemento. Dicho de otra manera, la propiedad margin controla el espacio fuera de un elemento, y la propiedad padding controla el espacio en el interior un elemento.

Exploremos primero los márgenes. Considere el elemento que se ilustra a continuación, que tiene un margen de 10 píxeles:

una ilustración de los márgenes alrededor de un elemento de página

Esto significa que habrá al menos 10 píxeles de espacio entre este elemento y los elementos de página adyacentes: el margen «empuja» a sus vecinos. Si juntamos varios de estos elementos, vemos cómo los márgenes crean espacios en blanco entre ellos, dándoles espacio para respirar:

una ilustración de los márgenes alrededor de varios elementos de página

Por otro lado, el relleno se encuentra dentro del borde de un elemento. El siguiente elemento tiene un relleno de 10 px en los lados izquierdo y derecho, y un relleno de 15 px en los lados superior e inferior:

una ilustración del relleno dentro de un elemento de página

Para crear el espacio, el relleno aumenta el tamaño del elemento o reduce el contenido del interior. Por defecto, el tamaño del elemento aumenta. Si desea crear el espacio reduciendo el contenido, configure el tamaño de caja propiedad a cuadro de borde (es decir tamaño de caja: cuadro de borde).

Recurso recomendado

La guía para principiantes de CSS

Rellena el formulario para acceder a tu guía gratuita.




Cuando esté ajustando el diseño de su diseño, deberá determinar si cambiará los márgenes o el relleno para lograr el efecto visual deseado. En esta sección, daremos algunos usos comunes para cada propiedad, comenzando con los márgenes.

Usos de los márgenes

Los márgenes CSS determinan el espacio que rodea a un elemento. Por lo tanto, los márgenes se pueden utilizar para…

1. Cambiar la posición de un elemento en la página

Los márgenes CSS pueden mover un elemento hacia arriba o hacia abajo en la página, así como hacia la izquierda o hacia la derecha. Si el ancho de su página es fijo, centrar un elemento horizontalmente es simple: solo asigne el valor margen: automático.

ver la pluma Margen CSS vs. Relleno – margen: automático de Christina Perricone (@hubspot) en CódigoPen.

2. Establecer la distancia entre elementos cercanos

Los márgenes determinan la cantidad de espacio entre elementos adyacentes o espacios en blanco. Los espacios en blanco son importantes para hacer que las páginas web sean visualmente aceptables. Por ejemplo, use márgenes para agregar espacio entre las imágenes o entre una imagen y la descripción del texto debajo de ella:

ver la pluma Margen CSS vs. Relleno – Espacio en blanco de la imagen de Christina Perricone (@hubspot) en CódigoPen.

3. Elementos superpuestos

Por otro lado, un valor de margen negativo le permite superponer elementos de página. Esto puede ser útil cuando se trata de lograr un efecto de cuadrícula rota.

ver la pluma Margen CSS frente a relleno: efecto de cuadrícula rota de Christina Perricone (@hubspot) en CódigoPen.

Usos para relleno

El relleno CSS determina cómo se ve el contenido dentro de su elemento respectivo. Puede cambiar el relleno CSS para lograr los siguientes efectos:

1. Agregue espacio entre el contenido y su borde

Este es el uso más común del relleno y es útil para crear…

Puede que también te guste...

Deja una respuesta

Tu dirección de correo electrónico no será publicada.