Al momento de visualizar nuestra pagina web, existen 3 tipos de display que nos van a ser muy útiles para ubicar los elementos html, estos son: block, **inline **, inline-block, flex y grid, en este tutorial te voy a explicar brevemente como se usa cada uno.
1- block: Los elementos con esta propiedad se muestran como bloques y generalmente ocupan todo el ancho disponible en su contenedor. Los elementos block inician en una nueva línea, lo que significa que aparecerán uno debajo del otro. Ejemplos comunes incluyen <div>, <p>, <h1> a <h6>, entre otros.
2- Inline: Los elementos con esta propiedad se muestran en línea, lo que significa que no inician en una nueva línea y solo ocupan el espacio necesario. Ejemplos comunes son <span>, <a>, <strong>, <em>, etc.
3- inline-block: Combina las características de los elementos inline y block. Los elementos inline-block se muestran en línea, pero pueden tener propiedades de ancho y alto aplicadas como si fueran elementos block. Esto es útil cuando se desea que un elemento flote en línea pero aún pueda controlarse su tamaño y disposición.
4- flex: Introduce un modelo de diseño flexible que permite el control del tamaño y la disposición de los elementos en un contenedor. Se utiliza para crear diseños responsivos y flexibles. Los elementos dentro de un contenedor con display: flex se denominan “flex items”.
5- grid: Similar al display: flex, pero ofrece un mayor control sobre la disposición de los elementos en filas y columnas en una cuadrícula bidimensional. Se utiliza para crear diseños complejos y estructurados de manera más precisa.
Super