Si eres nuevo en CSS, es posible que hayas escuchado estas palabras margen y relleno pero no están muy seguros de lo que significan o cómo usarlos en el diseño de su sitio web. Estos conceptos hacen cosas similares en CSS. Sin embargo, no son exactamente lo mismo y existen diferencias fundamentales significativas 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 cómo funcionan. 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, el margen es el espacio alrededor del borde de un elemento y el relleno es el espacio entre el borde de un elemento y el contenido del elemento. En otras palabras, la propiedad margin controla el espacio aparte de y la propiedad padding controla el espacio en el interior elemento.
Veamos primero los márgenes. Considere el elemento que se muestra a continuación que tiene un margen de 10 píxeles:
Esto significa que habrá al menos 10 píxeles de espacio entre el elemento y los elementos de página adyacentes: el margen «rechaza» a sus vecinos. Si combinamos varios de estos elementos entre sí, podemos ver cómo los márgenes crean espacios entre ellos, dándoles espacio para respirar:
Por otro lado, el complemento está dentro del límite del elemento. El siguiente elemento tiene un relleno de 10 px en los lados izquierdo y derecho y 15 px en los lados superior e inferior:
Para crear un espacio, el relleno aumenta el tamaño del elemento o reduce el contenido del interior. De forma predeterminada, el tamaño del elemento aumenta. Si desea crear la vulnerabilidad reduciendo el contenido, configure tamaño de caja propiedad de caja de marco (es decir. tamaño de la caja: cuadro de borde).
Cuándo usar un margen y relleno
En general, use márgenes cuando ajuste el espaciado de un elemento en relación con otro elemento (es decir, un div contra otro div en la página) y relleno cuando ajuste la apariencia de un solo elemento (es decir, la cantidad de píxeles entre el borde de un div y su texto contenido).
Cuando ajusta el diseño de su diseño, debe decidir si cambiar los márgenes o el relleno para obtener el impacto visual que desea. En esta sección, cubriremos algunos usos comunes para cada propiedad, comenzando con los márgenes.
Solicitudes de depósitos de margen
Los márgenes CSS definen el espacio que rodea un elemento. Por lo tanto, los márgenes se pueden utilizar para…
1. Cambiar la posición del elemento en la página
Los márgenes CSS pueden mover el elemento hacia arriba o hacia abajo en la página, y también hacia la izquierda o hacia la derecha. Si el ancho de la página es fijo, centrar horizontalmente el elemento es simple: simplemente asigne un 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 espaciado. Los espacios en blanco son importantes para que los sitios web sean visualmente atractivos. Por ejemplo, use márgenes para agregar un espacio entre imágenes, o entre una imagen y una descripción de texto debajo de ella:
ver la pluma Margen y relleno CSS: espacio en blanco en la imagen de Christina Perricone (@hubspot) en CódigoPen.
3. Elementos superpuestos
Por otro lado, un valor de margen negativo permite que los elementos de la página se superpongan. Esto puede resultar útil cuando se intenta crear un efecto de malla rota.
ver la pluma Margen CSS vs. acolchado – efecto malla rota de Christina Perricone (@hubspot) en CódigoPen.
Aplicaciones para revestimiento
El relleno CSS determina cómo se ve el contenido en el elemento correspondiente. Puede cambiar el relleno CSS para obtener los siguientes efectos:
1. Agrega un espacio entre el contenido y su borde
Este es el uso más común del relleno y es útil para crear espacios en blanco dentro de los elementos.
ver la pluma Margen CSS y relleno – tamaños de relleno de Christina Perricone (@hubspot) en CódigoPen.
2. Cambia el tamaño del artículo.
Cuando aumenta el valor de relleno, el contenido permanecerá del mismo tamaño, pero agregará más espacio alrededor del contenido. Esto es útil para elementos interactivos como botones cuando desea ampliar el área en la que se puede hacer clic.
Modelo de caja CSS
Para ver cómo los márgenes y el relleno funcionan juntos para establecer el espacio alrededor del contenido de un elemento, también podemos usar el modelo de campo CSS. El modelo de caja CSS se utiliza para el diseño y la disposición de la página. Básicamente, cada elemento HTML en su documento está envuelto en un cuadro en capas que consta de un margen, borde, relleno y contenido:
Aplicar alto y ancho a los elementos es más fácil una vez que comprende el modelo de caja CSS. Para garantizar la alineación correcta, basta con hacer algunos cálculos simples. Sin embargo, si no está seguro de cómo funciona el modelo de caja, podría terminar con un diseño desordenado. Para obtener más información sobre este concepto, consulte nuestra guía sobre el modelo de caja CSS.
Margen CSS vs. relleno vs borde
El límite es la capa modelo del cuadro CSS que se encuentra entre el margen y el relleno. De forma predeterminada, el borde no tiene ancho, pero se puede configurar con CSS borde propiedad.
El margen y el relleno siempre forman parte de un elemento, incluso si no hay un borde visible. Esta imagen ilustra tal caso:
Esto puede ser un poco confuso para los principiantes: los dos bloques de contenido no tienen un borde visible, pero el margen y el relleno aún se aplican.
Cómo agregar márgenes en CSS
Cada elemento HTML tiene cuatro márgenes que se pueden alternar: superior, derecho, inferior e izquierdo.
Para establecer el mismo valor de margen en los cuatro lados de un elemento, utilice margen propiedad. Para establecer el margen para lados específicos de un elemento, use margen superior, margen a la derecha, margen inferiory margen izquierdo bienes raíces.
ver la pluma Margen y relleno CSS – Configuración de márgenes 1 de Christina Perricone (@hubspot) en CódigoPen.
También puede especificar margen una propiedad con dos, tres o cuatro valores según las páginas a las que desee aplicar márgenes. Si desea márgenes iguales en todos los lados, solo necesita aplicar un valor. De lo contrario, el orden de los valores es importante:
- Los dos valores son para arriba y abajo, luego derecha e izquierda.
- Los tres valores son para la parte superior, luego la derecha, luego la izquierda, luego la parte inferior.
- Los cuatro valores son para arriba, luego derecha, luego abajo e izquierda.
ver la pluma Margen CSS y relleno: configuración de márgenes 2 de Christina Perricone (@hubspot) en CódigoPen.
Cada valor se puede representar como una longitud fija (a menudo en píxeles), un porcentaje (que define un valor como un porcentaje del ancho de su contenedor) o automático (que permite que el navegador establezca el margen).
Cómo agregar un relleno en CSS
Al igual que con los márgenes, el relleno tiene cuatro páginas para declarar: superior, derecha, inferior e izquierda.
Para configurar el relleno en todos los lados, use la propiedad abreviada relleno. Para configurar el relleno para una página específica, use forro superior, objeto-ley, alineandoy relleno-izquierda bienes raíces.
ver la pluma Margen CSS y relleno – configuración de relleno 1 de Christina Perricone (@hubspot) en CódigoPen.
Cuando usas relleno propiedad corta, también puede definir el relleno con dos, tres o cuatro valores. Al igual que con los márgenes, se aplicará un único valor en los cuatro lados. De lo contrario, el orden en que se escriban los valores determinará a qué páginas aplica cada uno de ellos:
- Los dos valores son para arriba y abajo, luego derecha e izquierda.
- Los tres valores son para la parte superior, luego la derecha, luego la izquierda, luego la parte inferior.
- Los cuatro valores son para arriba, luego derecha, luego abajo e izquierda.
ver la pluma Margen CSS y relleno – configuración de relleno 2 de Christina Perricone (@hubspot) en CódigoPen.
Cada valor se puede representar como una longitud fija o un porcentaje (que lo define como un porcentaje del ancho del contenedor).
Márgenes y relleno CSS: similares pero no iguales
Para organizar elementos en CSS, generalmente usa margen y relleno bienes raíces. Comprender la diferencia es un paso hacia el dominio de CSS. Ahora también sabe cómo configurar el margen y el relleno usando una propiedad corta, que es mucho más rápido que definir cada página de forma independiente.
En el diseño y desarrollo de sitios web, HTML y CSS van de la mano. HTML define la estructura y la semántica del contenido, mientras que CSS define el estilo y el diseño. Si es un principiante, le recomendamos que lea completamente HTML antes de probar CSS. Vuelva a HTML mientras aprende CSS hasta que comprenda completamente HTML. Después de aplicar CSS, HTML se vuelve mucho más interesante.
Nota del editor: esta publicación se publicó originalmente en abril de 2020 y se actualizó para que sea completa.
