Actualizado 2/5/2020
Cuando empieces a diseñar, oirás las palabras «margen» y «acolchado» lanzadas por todas partes. Rápidamente entenderás que a lo que se refiere es al espacio entre elementos. Al principio, estas dos palabras pueden ser confusas ya que ambas tienen que ver con la misma cosa. Sin embargo, hay diferencias importantes y, una vez que las entiendas, podrás tomar mejores decisiones de diseño.
Margen
El margen es el espacio entre el borde y el siguiente elemento de su diseño. Piensa en el espacio fuera del borde y entre éste y los otros elementos. Esto es todo el margen. El margen va alrededor de los cuatro lados del contenido y puedes apuntar y cambiar el margen para cada lado.
Acolchado
El acolchado es el espacio que está dentro del elemento entre el elemento y el borde. El relleno va alrededor de los cuatro lados del contenido y puedes apuntar y cambiar el relleno de cada lado (como un margen).
Una imagen de la diferencia entre el margen y el relleno
La forma más fácil de entender la diferencia entre el margen y el relleno es a través de la imagen de abajo. Demuestra cómo se ve cada parte de algo (como un elemento de un párrafo).
El modelo Box en CSS
La imagen de arriba también se conoce como «modelo de caja» y se utiliza cuando se trata de CSS. Es importante entender cómo funciona el modelo de caja, para que puedas entender cómo funcionan el ancho y la altura de tus elementos.
Cuando estableces el ancho y la altura de un elemento, es sólo para el área de contenido. Probablemente tendrás que hacer algunas matemáticas para asegurarte de que tus elementos se alinean correctamente, debido al margen y al relleno.
Algo importante para los principiantes es que el margen y el relleno pueden resultar confusos porque seguirán siendo partes de su elemento aunque no incluyan un borde.
En la imagen de abajo, tenemos dos bloques de contenido sin borde adicional. Pueden ver cómo el margen y el relleno siguen siendo válidos.
La diferencia de codificación entre el margen y el relleno en CSS
Al desarrollar, hay algunas diferencias en el margen de codificación y el relleno cuando se usa CSS para dar estilo al HTML.
Cómo añadir márgenes en CSS
Hay que declarar cuatro márgenes si no quieren colapsar entre sí:
- Margen superior
- Margen-derecha
- Margen-fondo
- Margen izquierdo
Para no tener que establecer los cuatro márgenes individualmente, la propiedad de margen permite establecerlos todos en una declaración. Si quieres una longitud de margen o un porcentaje diferente para uno o más márgenes, puedes hacerlo individualmente.
Por ejemplo, si quieres 30 píxeles en la parte superior, 75 píxeles en la derecha, 45 píxeles en la parte inferior y 100 píxeles en la izquierda, usarías:
p {
margen: 30px 75px 45px 100px;
}
Nota: El orden va alrededor del elemento en el sentido de las agujas del reloj.
Para usar un porcentaje en el CSS, debe ser un porcentaje del tamaño en línea del padre para obtener márgenes de igual tamaño en todos los lados.
Un problema común cuando se desarrollan márgenes es el colapso de los mismos. Cuando un encabezado tiene un margen inferior seguido de un párrafo con un margen superior, el margen se colapsa para combinarse. Esto hace que el espacio entre dos elementos se haga más grande. Esencialmente, el margen más pequeño termina dentro del margen más grande.
Hay algunas maneras de evitar que se produzca un colapso de los márgenes, pero quizás las dos soluciones más comunes son las siguientes:
- Contexto de formato de bloque (BFC): Esto evitará el colapso del margen al contener el elemento.
- Contenedores flexibles y de rejilla: Esto establece contextos de formato para sus contenidos.
Cómo añadir relleno en CSS
Se utiliza la misma codificación básica para el relleno en el CSS que para los márgenes, excepto que el término «relleno» reemplaza al término «margen».
- Relleno
- Acolchado derecho
- Acolchado de fondo
- Relleno izquierdo
Cada propiedad de acolchado puede tener la longitud, el porcentaje y la herencia especificados. De lo contrario, el uso de la propiedad de relleno le permite establecer todos los lados en una declaración.
Por ejemplo:
div {
acolchado: 20px 25px 50px 75px;
}
Nota: El orden va alrededor del elemento en el sentido de las agujas del reloj.
Aprende más sobre la codificación en CSS
Ahora que has aprendido la diferencia entre el relleno y el margen en el CSS, ¿estás listo para aprender más? ofrece una variedad de cursos de CSS y otros recursos que te darán una ventaja en tu carrera.
¡Empieza hoy!