admin
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:
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:
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:
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).
Cuándo usar el margen frente al relleno
En general, use márgenes cuando ajuste el espaciado de un elemento en relación con otro elemento (es decir, un div en relación con otro div en la página) y relleno cuando ajuste el aspecto de un elemento individual (es decir, el cantidad de píxeles entre el borde de un div y el texto que contiene).
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…
