Al editar un sitio web usando CSS, las propiedades más utilizadas para espaciar elementos en una página son el relleno y el margen. Para los principiantes, estos términos pueden sonar confusos. Además, si se aplican incorrectamente, pueden generar un diseño web desordenado.
La principal diferencia entre el relleno CSS y el margen es que el relleno es el espacio entre el contenido del elemento y el borde (dentro del propio elemento), mientras que el margen es el espacio alrededor del borde de un elemento.
Por lo tanto, esta guía explicará con más detalle la diferencia entre relleno y margen, cómo funcionan y cómo implementarlos en CSS. También hay consejos adicionales disponibles al final del artículo para ayudarlo a usarlos correctamente.
Relleno vs Margen: ¿Qué es y cuándo debería usarlo?
Tanto el relleno como el margen se utilizan para personalizar el diseño de un sitio web. Sin embargo, cada uno tiene sus propios propósitos y funciones.
Relleno
La propiedad de relleno es lo que crea el espacio o área alrededor del contenido de un elemento. Consiste en el relleno superior, derecho, inferior e izquierdo. En CSS se escriben como acolchado superior:, relleno-derecha:, fondo acolchado:, y relleno-izquierda:. Sus valores por defecto son 0.
Para agregar relleno a un elemento, puede establecer los valores en:
Longitud – un valor fijo, generalmente en px, pt o cm.Porcentaje – el tamaño del relleno es relativo al ancho del elemento.Heredar – establece las propiedades de relleno de CSS para seguir al elemento principal.
Tenga en cuenta que no puede usar valores negativos y automáticos para los rellenos.
Aquí hay un ejemplo de un código CSS de relleno estándar:
div {
padding-top: 30px;
padding-right: 50px;
padding-bottom: 30px;
padding-left: 50px;
}
El relleno tiene una propiedad abreviada – relleno:. Simplifica el código anterior a un código de una línea. Esto es para evitar tener un archivo CSS largo, lo que puede ralentizar el tiempo de carga de su sitio.
La propiedad abreviada padding puede tener de uno a cuatro valores:
Cuatro valores – cuando necesite especificar los valores de los rellenos superior, derecho, inferior e izquierdo. El código anterior, por ejemplo, podría escribirse como:
padding: 30px 50px 30px 50px;
Tres valores – si el relleno derecho e izquierdo tienen la misma longitud, puede fusionar los valores derecho e izquierdo en uno. Entonces, el código sería:
padding: 30px 50px 30px;
dos valores – el primer valor determina el relleno superior e inferior mientras que el segundo valor establece el relleno derecho e izquierdo:
padding: 30px 50px;
un valor – cuando desee especificar una longitud para los cuatro lados del relleno. Por ejemplo:
padding: 30px;
Tenga en cuenta que cuando fija el ancho de un elemento, los rellenos se sumarán al ancho total. Tome el siguiente ejemplo:
div {
width: 250px;
padding: 25px;
}
El ancho total del elemento es 300 px, o 250 px más 25 px de relleno derecho y 25 px de relleno izquierdo. Si desea que un elemento tenga un ancho específico, tenga en cuenta la longitud del relleno.
Utilice padding cuando no desee que el contenido de un elemento toque los bordes de su contenedor. También puede usarlo para aumentar y disminuir el tamaño de los elementos web.
Tome el elemento del botón, por ejemplo. El relleno es el área que rodea la etiqueta o el texto del botón. Cuando edite el relleno, afectará el tamaño del botón porque tendrá más o menos espacio alrededor del texto.
Margen
La propiedad margin es la capa más externa de un elemento web. En otras palabras, crea espacio alrededor del elemento. La propiedad consta de margen superior:, margen derecho:, margen inferior:, y margen izquierdo:.
Al igual que el relleno, el margen se puede establecer en valores de longitud, porcentaje y herencia. Sin embargo, también es compatible con:
Auto – el navegador calculará un valor de margen adecuado para usar. Por lo general, centrará el elemento web.Valores negativos – acerca los elementos a sus vecinos.
El código de margen estándar es:
div {
margin-top: 100px;
margin-right: 25px;
margin-bottom: 100px;
margin-left: 25px;
}
En CSS, el margen también tiene una propiedad abreviada: margen:. También está determinado por el número de valores:
Cuatro valores – si desea determinar los cuatro lados del margen. Por ejemplo:
margin: 100px 25px 100px 25px;
Recuerde escribir los valores en orden desde arriba, luego muévase en el sentido de las agujas del reloj hacia la izquierda.
Tres valores – aplicable cuando el margen derecho e izquierdo tienen el mismo valor:
margin: 100px 25px 100px;
dos valores – el primer valor se aplica al margen superior e inferior mientras que el segundo valor se refiere al margen derecho e izquierdo:
margin: 100px 25px;
un valor – cuando desee que los cuatro márgenes tengan la misma longitud. Por ejemplo:
margin: -30px;
Para configurar automáticamente el margen, simplemente escriba el código:
div {
width: 250px;
margin: auto;
}
Centrará horizontalmente el elemento dentro de su contenedor. En otras palabras, el elemento ocupará el ancho especificado y el espacio restante se dividirá en partes iguales entre el margen izquierdo y derecho.
Utilice un margen cuando desee mover elementos hacia arriba, abajo, izquierda, derecha o centrarlos. La distancia entre elementos es también obra de los márgenes. Aparte de eso, los márgenes también se pueden usar para superponer elementos.
Por ejemplo, con el elemento de imagen, puede usar un margen para colocar otra imagen encima. Alternativamente, establezca una distancia específica entre la imagen y un cuadro de texto.
Relleno CSS vs. Márgenes vs. Bordes: ¿Cuál es la diferencia?
El relleno es una propiedad de CSS que solo funciona en elementos que tienen bordes. Crea el espacio entre el borde y el contenido de un elemento. Por lo tanto, tenga en cuenta que el relleno no tiene efecto en los elementos que no tienen bordes.
Los márgenes forman el espacio fuera de los bordes de los elementos. A diferencia del relleno, los márgenes aún pueden afectar a un elemento, tenga o no bordes.
Otra diferencia es que el color de fondo del relleno y los bordes se puede personalizar, mientras que los márgenes son transparentes; con ellos, se mostrará el color de fondo del tema del sitio web.
El modelo de caja CSS
Cada página web se compone de bloques de contenido rectangulares. Están dispuestos encima, debajo y uno al lado del otro. Estos bloques son lo que llamas elementos HTML.
El modelo de caja CSS es básicamente un contenedor o caja que envuelve cada elemento HTML. Consiste en:
cuadro de contenido – el área donde se muestra su contenido, como textos e imágenes.caja de relleno – es el espacio que rodea el área de contenido.Cuadro de borde – se refiere al contenedor entre el relleno y el margen o la caja que envuelve el elemento.cuadro de margen – la capa más externa o el espacio invisible fuera del borde.Ancho – se refiere al ancho del área de contenido de un elemento. Su valor es 100% por defecto, pero se puede establecer en un ancho definido.Altura – generalmente se basa en la longitud del contenido, pero también es posible establecer una altura específica.
A continuación se muestra el código de un modelo de caja CSS estándar con su vista previa:
{
width: 250px;
height: 100px;
margin: auto;
padding: 20px;
background-color: cyan;
border: 5px solid blue;
}
Cómo agregar relleno en CSS
El siguiente tutorial le mostrará cómo agregar relleno a un elemento de encabezado en una publicación de WordPress.
- Desde el WordPress Tablero de mandos, pasar el cursor sobre Apariencia y seleccione personalizar.
- Ingrese los valores de relleno para el elemento H1. Por ejemplo:
h1 {
color de fondo: beige;
relleno: 20px 100px;
}
- Guarde sus cambios.
Cómo agregar márgenes en CSS
Siga los pasos a continuación para agregar márgenes a un elemento de imagen en una publicación de WordPress.
- Navegar a WordPress Tablero de mandos -> Apariencia -> personalizar.Seleccione la publicación que desea editar. Busque y haga clic en el CSS adicional pestaña del menú lateral.
- Escriba el valor del margen para el elemento de la imagen. Por ejemplo:
imagen {
margen: -20px 5px;
}
- Guarde las ediciones.
Consejos al usar márgenes y relleno
Diferentes elementos de contenido pueden funcionar mejor con márgenes o relleno. Así que tenlo en cuenta a la hora de elegir entre los dos. Aquí hay algunos otros consejos que pueden resultarle útiles:
Para agregar espacio dentro de una columna, use relleno en lugar de márgenes si está creando una cuadrícula receptiva. Use relleno en las columnas si una página web tiene varias columnas que se apilarán verticalmente en una pantalla más pequeña. Use propiedades de margen cuando agregue espacio alrededor del elementos de texto, imagen y contenedor. Agregue primero los márgenes inferiores para crear un espacio uniforme entre los elementos. Cuando un contenedor se encuentra dentro de una columna, agregue un margen inferior al contenedor. Agregará más espacio cuando el contenido se apila verticalmente en pantallas más pequeñas. Use márgenes para espaciar alrededor de los botones en lugar de rellenar, ya que afecta el estilo de los botones. Cuando tenga un elemento interactivo, use márgenes para agregar espacio alrededor.
Si editar manualmente el diseño de un sitio web usando CSS es demasiado complicado para ti, prueba un creador de páginas. No requiere codificación y ofrece una fácil personalización, ahorrándole mucho tiempo.
Además, el diseño que cree responderá automáticamente. No tendrá que preocuparse por tomar decisiones de diseño difíciles con respecto a los márgenes y el relleno. El sitio web se ajustará perfectamente en varios tamaños de pantalla.
Conclusión
En CSS, tanto el margen como el relleno agregan espacio a los elementos web, pero cada uno produce resultados diferentes. El relleno es el espacio entre el contenido de un elemento y el borde.
Por otro lado, el margen constituye el espacio más exterior del elemento.
Para los principiantes, puede ser un poco confuso decidir qué propiedad aplicar al diseñar su sitio web. Sin embargo, se familiarizará más con ellos a medida que juegue y experimente.
Con suerte, los consejos mencionados en este artículo lo ayudaron a comprender sus diferencias y cuándo usar el relleno frente al margen.
