Cómo crear un elemento de caja usando solo CSS

Todo principiante debe comenzar primero con lo básico. En el caso de CSS, lo básico es aprender el modelo de caja. Antes de continuar con el aprendizaje de cualquier otro concepto de CSS, ¡este es el que debe dominar primero!

El modelo de caja es el componente básico de CSS.

Tiende a causar confusión con los desarrolladores principiantes, por lo que ahora es el momento de dejar las cosas claras. Aquí aprenderá todos los elementos básicos del modelo de caja y cómo están todos conectados.

Antes de profundizar más, todos deben comprender que cada elemento en el diseño web es una caja rectangular . Probablemente haya escuchado esto varias veces antes, pero este es un concepto importante que todo desarrollador debe tener en cuenta.

¡Ahora, expliquemos el modelo de caja misteriosa!

Estructura del modelo de caja

Como se mencionó anteriormente, la estructura del modelo de caja consta de:

• Contenido (alto y ancho),
• relleno ,
• borde ,
• margen

Estos son todos los elementos que necesita el navegador para representar un modelo de caja. Afortunadamente, con CSS podemos controlar cada uno de ellos individualmente. Veamos cómo.

En este artículo, usaré el siguiente código y lo agregaré gradualmente.

HTML

 < div class = ”box” > Lorem ipsum dolor amet whatever woke cronut, farm-to-table church-key tousled edison bulb. </ div >

 .box { background-color : hotpink; color : #fff ; }

El contenido

El contenido es bastante claro. Es el contenido de nuestro elemento el que tiene un ancho y alto específicos. Se puede establecer un alto y un ancho fijos usando el alto y el ancho de las propiedades de CSS, o se pueden determinar por el propio contenido.

Ahora, lo único que es un poco confuso aquí es el uso de elementos en línea o de nivel de bloque.

Uso de elementos en línea y de nivel de bloque

Para refrescar su memoria, la diferencia entre los elementos en línea y en bloque es el hecho de que los elementos en bloque ocupan el 100% del ancho del contenedor , mientras que los elementos en línea solo ocupan la cantidad de espacio que necesita el contenido .

Cuando se usan elementos en línea , no es posible establecer un ancho o alto fijo para ese elemento, ya que el elemento no tiene ningún ancho ni alto predeterminados (porque el ancho y el alto están determinados por el contenido). Esto se puede solucionar convirtiendo el elemento en un elemento de bloque.

A diferencia de los elementos en línea, al usar elementos a nivel de bloque, puede establecer fácilmente un ancho o una altura fijos para ellos . Dado que, de forma predeterminada, los elementos de nivel de bloque ocupan el 100% del ancho del contenedor, podemos anularlo fácilmente estableciendo un ancho fijo.

También puede convertir su elemento en bloque en línea . Cuando se usa el bloque en línea, el elemento tiene el comportamiento del elemento en línea (solo ocupa el espacio del contenido), pero puede manipularlo de la misma manera que lo hace con un elemento de bloque .

Ahora, cuando tenemos un elemento de nivel de bloque, podemos darle un ancho y una altura.

 .box { height : 200px ; width : 200px ; background-color : hotpink; color : #fff ; }

El resultado es este:

el relleno

A continuación, vamos a agregar algo de relleno a nuestra caja.

El relleno define el espacio entre el contenido y el borde de la caja.

Veámoslo en acción en nuestro ejemplo.

 .box { height : 200px ; width : 200px ; background-color : hotpink; color : #fff ; padding : 10px ; }

El resultado:

En la imagen vemos cómo el relleno afecta el aspecto general de la caja. Hay un espacio de 10px entre el contenido y el borde de la caja en los cuatro lados . También podemos agregar relleno a cada lado individualmente, usando relleno superior, relleno inferior, relleno izquierdo, relleno derecho.

La frontera

Como vamos de adentro hacia afuera, el siguiente paso sería definir el borde. El borde rodea el contenido y no tiene que usarlo, pero aún existe. Esto solo significa que el borde tiene un ancho de cero.

Ahora, agregaremos un borde a nuestro ejemplo.

 .box { height : 200px ; width : 200px ; background-color : hotpink; color : #fff ; padding : 10px ; border : solid 3px black; }

El margen

El aspecto final del modelo de caja es el margen. ==Como algunos de ustedes saben, el margen es el espacio fuera del borde.== Es el espacio entre los elementos.

La mejor manera de demostrar esto en un ejemplo práctico es mostrarle cómo se colocan dos elementos con y sin márgenes.

 < div class = ”box” > </ div > < div class = ”box” > </ div >

 .box { height : 200px ; width : 200px ; background-color : hotpink; color : #fff ; padding : 10px ; border : solid 3px black; margin : 0 }

En este ejemplo, vemos como, sin margen, dos elementos se pegan y no hay espacio entre ellos.

Ahora, agreguemos un poco de margen.

 .box { margin : 20px ; }

Ahora, esto se ve mejor. Agregamos algo de espacio entre las cajas. También podemos agregar espacio en cada lado del elemento individualmente usando margin-top, margin-bottom, margin-left o margin-right.

Resumen

Has llegado al final de este artículo, ¡felicidades! :)

¿Así que, qué hemos aprendido?

1. Cada elemento en una página web es básicamente una caja.
2. Los aspectos del modelo de caja son contenido, relleno, borde y margen.
3. Al usar un elemento en línea, no puede establecer un ancho o alto fijo para ese elemento, mientras que es posible con un bloque y un elemento de bloque en línea.

Con suerte, esto te ayudó a aprender algo nuevo o te refrescó la memoria.

Estad atentos, porque en el próximo artículo hablaremos de otra propiedad muy importante que os ayuda a calcular el ancho del modelo de caja, la propiedad box-sizing .

¡Gracias por leer!

https://kolosek.com/css-box-modelo-para-principiantes/