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 . Probablemente haya escuchado esto varias veces antes, pero este es un concepto importante que todo desarrollador debe tener en cuenta. cada elemento en el diseño web es una caja rectangular ¡Ahora, expliquemos el modelo de caja misteriosa! Estructura del modelo de caja Como se mencionó anteriormente, la estructura del modelo de caja consta de: (alto y ancho), Contenido , 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 Lorem ipsum dolor amet whatever woke cronut, farm-to-table church-key tousled edison bulb. < = > div class ”box” </ > div { : hotpink; : ; } .box background-color 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 , mientras que . elementos en bloque ocupan el 100% del ancho del contenedor los elementos en línea solo ocupan la cantidad de espacio que necesita el contenido Cuando se usan elementos en , no es 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). línea posible Esto se puede solucionar convirtiendo el elemento en un elemento de bloque. A diferencia de los elementos en línea, . 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. al usar elementos a nivel de bloque, puede establecer fácilmente un ancho o una altura fijos para ellos También puede convertir su elemento . Cuando se usa el bloque en línea, el elemento tiene (solo ocupa el espacio del contenido), . en bloque en línea el comportamiento del elemento en línea 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. { : ; : ; : hotpink; : ; } .box height 200px width 200px background-color 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. { : ; : ; : hotpink; : ; : ; } .box height 200px width 200px background-color 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 . También podemos agregar relleno a cada lado individualmente, usando en los cuatro lados 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. { : ; : ; : hotpink; : ; : ; : solid black; } .box height 200px width 200px background-color color #fff padding 10px border 3px 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 { : ; : ; : hotpink; : ; : ; : solid black; : } .box height 200px width 200px background-color color #fff padding 10px border 3px 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? Cada elemento en una página web es básicamente una caja. Los aspectos del modelo de caja son contenido, relleno, borde y margen. 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/
