El modelo de caja CSS explicado con ejemplos

Si planeas crear un diseño de página web increíble, necesitarás conocer los márgenes, los bordes, el relleno y el contenido. Cada elemento del diseño web, ya sea una imagen o un texto, utiliza un cuadro con estas propiedades. Puede crear fácilmente diseños complejos jugando con el modelo de caja. En este artículo, analizaremos el modelo de caja CSS y le mostraremos cómo usar estas propiedades con ejemplos prácticos.

¿Qué es el modelo de caja CSS?

El modelo de caja CSS es un estándar creado por el Consorcio Mundial de la red. Describe todos los elementos de un documento HTML como cajas rectangulares con sus propias dimensiones. Estos cuadros contienen un área de contenido y áreas opcionales de margen, borde y relleno circundantes. Entonces, exploremos las partes de un cuadro CSS.

Descubramos las cuatro capas del modelo de caja CSS.

Primera capa: contenido

El área de contenido contiene el contenido principal del elemento, que podría ser una imagen, texto o cualquier forma de contenido multimedia. Puede modificar las dimensiones de los elementos a nivel de bloque utilizando

altura y ancho propiedades.

Segunda capa: acolchado

El relleno es el espacio entre el cuadro de contenido y su cuadro de borde. Aunque se ubica alrededor de su contenido como un espacio en blanco, puede usar un color de fondo para visualizar la diferencia. Puede aplicar acolchado superior, padding-right, fondo acolchado, y padding-left propiedades para modificar el espacio.

Tercera capa: borde

El borde envuelve el contenido y el área de relleno. Puede cambiar el tamaño y el estilo del borde usando ancho del borde, estilo de borde, y color del borde propiedades.

Cuarta capa: Margen

La última capa del modelo de caja se usa ampliamente para generar espacio entre elementos. El margen envuelve el contenido, el relleno y el área del borde. Puedes usar margen superior,margen derecho, margen inferior, y margen izquierdo propiedades. También puede darle a la propiedad de margen un valor negativo o auto para lograr algunas técnicas de colocación increíbles.

Configuración del proyecto para el modelo de caja CSS

Creemos un mini proyecto para demostrar el modelo de cuadro básico con un cuadro de contenido y propiedades de relleno, borde y margen. Puede ir con texto, imagen o contenido multimedia. Comenzaremos asegurándonos de que esté estructurado correctamente.

Estructura con HTML

Producción:

Puede utilizar las funciones integradas de su navegador, como el Herramientas para desarrolladores de Chrome, para ver qué está pasando. Estamos usando dos imágenes de Unsplash. Para simplificar, ocultaremos la imagen del teléfono inteligente usando pantalla: ninguna; hasta que lo necesitemos más tarde.

Estilo con CSS

/*************************
PEINADO BÁSICO
*************************/
* {
margen: 0px;
relleno: 0px;
}
cuerpo {
pantalla: flex;
dirección flexible: fila;
} 
.monitor {
pantalla: ninguna! importante;
}

Ahora, diseñemos nuestro cuadro de contenido. Primero, configuraremos el altura y ancho de la imagen. Además, dar un color de fondo ayuda a una mejor visualización. Hagamoslo.

/*************************
CAJA DE CONTENIDO
*************************/
.content-box {
pantalla: flex;
dirección flexible: fila;
justificar-contenido: centro;
alinear-elementos: centro;
/ * Aplicar estilo al cuadro de contenido usando propiedades de alto y ancho * /
color de fondo: #fdf;
altura: 20em;
ancho: 30em;
}

Dale espacio al contenido para respirar con relleno

Puede configurar acolchado superior, padding-right, fondo acolchado, y padding-left propiedades individualmente o utilice la abreviatura. Intente utilizar la abreviatura si es posible, ya que puede ahorrarle algo de tiempo. Veamos cómo funciona el relleno.

 /*************************
RELLENO
*************************/
/ * Aplicar relleno * /
acolchado superior: 5em;
padding-right: 2em;
fondo acolchado: 8em;
padding-left: 2em;
/ * Taquigrafía de relleno * /
/ * arriba / derecha / abajo / izquierda * /
acolchado: 5em 2em 8em 2em;
/ * arriba / horizontal / abajo * /
acolchado: 5em 2em 8em;

Producción:

Dibujar líneas alrededor del relleno usando un borde

Al aplicar la propiedad de borde, asegúrese de que está utilizando la color del borde propiedad para darle al borde un color distinto al del fondo. Puede seleccionar el estilo de borde ya sea de forma individual o de una sola vez utilizando la propiedad de taquigrafía. Lo mismo se aplica a la ancho del borde propiedad.

También puede configurar el radio de borde para dar a la caja esquinas redondeadas con un radio en px, movimiento rápido del ojo, em, o porcentaje.

 /*************************
FRONTERA
*************************/
/ * Aplicando propiedades de borde * /
/ * Establecer el color del borde * /
color del borde: rgb (148, 234, 255);
/ * Seleccionar estilo de borde * /
estilo de borde superior: sólido;
border-right-style: discontinuo;
borde-fondo-estilo: surco;
border-left-style: cresta;
/ * taquigrafía de estilo de borde * /
/ * arriba / derecha / abajo / izquierda * /
estilo de borde: cresta sólida con ranuras discontinuas;
/ * Establecer el ancho del borde * /
borde-ancho-superior: 4em;
borde-ancho-derecho: 2em;
ancho del borde inferior: 2em;
borde-ancho-izquierdo: 2em;
/ * taquigrafía de ancho de borde * /
/ * arriba / derecha / abajo / izquierda * /
ancho del borde: 4em 2em 2em 2em;
/ * arriba / horizontal / abajo * /
ancho del borde: 4em 2em 2em;
/ * taquigrafía de propiedad de borde * /
/ * borde: rgb sólido 4em (148, 234, 255); */
/ * Establecer radio de borde * /
radio de borde: 5em;
radio de borde: 20%;

Producción:

Agregar espacio entre cajas con margen

Puede centrar un cuadro horizontalmente usando margen: 0 automático, siempre que tenga un ancho definido.

 /*************************
MARGEN
*************************/
/ * Aplicando propiedades de margen * /
margen superior: 4em;
margen derecho: 5em;
margen inferior: 3em;
margen izquierdo: 5em;
/ * Margen abreviado * /
/ * arriba / derecha / abajo / izquierda * /
margen: 4em 5em 3em 5em;
/ * arriba / horizontal / abajo * /
margen: 4em 5em 3em;
/ * Usando margen automático * /
margen: 3em automático;

Producción:

Puede especificar la propiedad de margen utilizando uno, dos, tres o cuatro valores. Los valores pueden ser una longitud, un porcentaje o una palabra clave como auto. Entendamos cómo funciona:

• Cuando especifica solo un valor, significa que los cuatro lados tendrán el mismo margen.
• Cuando especifica dos valores, el primer valor significa margen superior y margen inferior mientras que el segundo valor especifica margen derecho y margen izquierdo.
• Cuando especifica tres valores, el primero y el último se aplican a margen superior y margen inferior respectivamente. El valor medio es para el área horizontal, es decir, margen derecho y margen izquierdo.
• Cuando especifica los cuatro valores, se aplican a la parte superior, derecha, inferior e izquierda (en el sentido de las agujas del reloj) respectivamente.

Tenga en cuenta que también puede utilizar estos atajos para las propiedades de relleno y borde.

Ver también: La hoja de trucos de las propiedades esenciales de CSS3

¿Ha utilizado alguna vez un margen negativo? Para visualizarlo borremos pantalla: ninguna para mostrar nuestra segunda imagen, luego establezca un margen negativo.

/* .monitor {
pantalla: ninguna! importante;
} */
.content-box {
pantalla: flex;
dirección flexible: fila;
alinear-elementos: centro;
color de fondo: #fdf;
altura: 20em;
ancho: 30em;
acolchado: 5em 2em 8em;
estilo de borde: cresta sólida con ranuras discontinuas;
ancho del borde: 4em 2em 2em;
radio de borde: 20%;
/ * Usando margen negativo * /
margen: 3em -20em 3em 5em;
}

Producción:

El modelo de caja: hacer un sitio web perfecto para píxeles

El modelo de caja le permite definir el espacio entre elementos, agregar bordes y crear fácilmente un diseño de aspecto complejo. Puede comenzar de inmediato a crear un sitio web increíble. Mientras tanto, puedes explorar el cuadro de borde propiedad en detalle y jugar con el código anterior.

Debe comprender que existen otros métodos para diseñar contenido en CSS. Estos incluyen CSS Grid y CSS Flexbox. Una vez que se sienta cómodo con el modelo de caja, debe seguir aprendiendo sobre estas alternativas.

Tutorial de CSS Flexbox: Conceptos básicos

Posicione perfectamente sus elementos HTML con la ayuda de CSS Flexbox.

Leer siguiente

Sobre el Autor