Tipos de display más usados: block, inline e inline-block

Entender estos tipos de displays es muy importante (sobre todo porque sí son muy importantes cuando estás trabajando con CSS 👀), ya que a veces estamos tratando de añadirle márgenes a algunos elemenos y por alguna extraña razón no funciona (y es aquí donde muchas personas empiezan a decir que CSS es difícil), pero es sencillo:
.

• inline: Estos elementos son los que su caja mide exactamente lo mismo que su contenido. Estos elementos los podemos usar en textos y en lugar de que se agreguen en una nueva línea se agregaran justo al ladito del texto. ❗ Tienen como desventaja que no podemos ponerles márgenes ni tampoco podemos cambiar su tamaño.
• block: Estos elementos ocupan toda la pantalla, por lo que si quieres agregar otro elemento, este se agregará automáticamente abajo. No importa que tengas poco contenido, el elemento sí o sí va a ocupar toda la pantalla.
• inline-block: Esto mezcla lo mejor de ambos mundos. Con este display podemos tener tanto los beneficios de inline como de block, es decir, podemos tener elementos que no ocupen todo el ancho de la pantalla, sino que ocupen solamente lo que su contenido ocupa, pero también vamos a poder darle márgenes y podremos cambiar su tamaño 🤠.

.
Conociendo esto ya puedes empezar a armar layouts en tu página web usando CSS. Aunque aún nos faltan ver dos displays que últimamente son muy usados (y que son la razón por la cual CSS es amor y es muy fácil trabajar con el lenguaje 💚).

Imaginense aprender los de los float

.
Gracias CSS Grid y Flexbox por exisitr.
Vamos a la siguiente clase

Una imagen que resume los tipos de display

Display

La propiedad CSS display establece si un elemento se trata como un elemento en bloque o en línea y el diseño utilizado para sus hijos, como el flow layout, grid o flex.

Outside<display-outside>

Estas palabras clave especifican el tipo de visualización exterior del elemento, que es esencialmente su papel en la disposición de flujo.

Inside <display-inside>

Estas palabras clave especifican el tipo de visualización interior del elemento, que define el tipo de contexto de formato en el que se presenta su contenido (suponiendo que se trate de un elemento no sustituido).

Internal<display-internal>

Some layout models such as table and ruby have a complex internal structure, with several different roles that their children and descendants can fill. This section defines those “internal” display values, which only have meaning within that particular layout mode.

Box<display-box>

Estos valores definen si un elemento genera cajas de visualización en absoluto.

Legacy<display-legacy>

CSS 2 utilizaba una sintaxis de una sola palabra clave para la propiedad display, que requería palabras clave separadas para las variantes a nivel de bloque y a nivel de línea del mismo modo de diseño.

🍫 display: inline

Los elementos en línea no admiten dimensiones (width, height) pero si admiten margin, padding y border, solo ocupan lo que tengan en su contenido, es decir, aunque quieras declarar un ancho y alto a un elemento de línea no podrá tener efecto ya que estos elementos no aceptan dimensiones

🤔¿Cuáles son los elementos de línea?
La siguiente es una lista de los elementos en línea de HTML, podemos ver algunos de estos elementos en los cuales colocamos contenido en forma de texto:

b, big, i, small, tt, abbr, acronym, cite, code, dfn, em, kbd, strong, samp, time, var, a, bdo, br, img, map, object, q, script, span, sub, sup, button, input, label, select, textarea.

📄 display: block
Un elemento de bloque es un elemento que ocupa el ancho máximo disponible.

🤔 ¿Cuáles son los elementos de bloque?

<address>, <article>, <aside>, <audio>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <header>, <hgroup>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul>, <video>, <h1>...<h6>.

⏸️ display: inline-block
Es una combinación entre los dos tipos de elementos mencionados anteriormente (block e inline), los elementos con el valor inline-block admiten dimensiones pero todavía son elementos de línea, es decir estarán colocados uno al lado de otro.

↕️↔️ display: flex y display: grid
De manera general podemos decir que el valor flex se usa para maquetar componentes como por ejemplo, un menú de navegación y grid se usa para maquetar el layout. Se que estoy generalizando y esto, no es 100% así, porque pueden haber componentes complejos en los que es necesario usar grid y algunos layouts son simples y otros no, todo depende de lo que estés diseñando.

Nota: pagina de referencia: https://dev.to/lupitacode/la-propiedad-display-en-css-1b6a

Todos los temas que estamos viendo son sumamente importantes y aprenderlos bien implica tener bases solidas de CSS.
Todo fue importante pero es importante que se queden con que tenemos el display : inline, inline-block y block. (Si, también esta Flex y Grid pero aun no nos metamos en eso, no es difícil, pero no es el momento aún).
Como se podrá observar en la Figura que comparto al final y que encontré en la red, el tipo de Display permitira que si son en linea, los elementos se posiciones uno a lado del otro. Pero hay que recordar que si son en linea, estos no pueden modificarse con las propiedades de alto y ancho, tomaran como alto y ancho el contenido que tienen, En cuanto al margen solo se puede modificar el margen horizontal (left y right).

En cuanto a los de Display block, por defecto toman todo el ancho de la página. mientras que toman el alto de su contenido.
Si se puede modificar el alto y ancho y el margen aplica para todos los lados que se requiera (top, right, bottom y left).

Finalmente, inline-block…
Este es una mezcla de ambos, al principio se ve como en linea pero puede modificarse al igual que un elemento en bloque.

No es difícil, solo practiquen y verán que lo entenderán mejor.
Cuando ya veamos Flex y Grid nos explotara la cabeza 🤯 por lo maravilloso que es el desarrollo frontend

Ejemplo Gráfico

Fuente: https://dev.to/lupitacode/la-propiedad-display-en-css-1b6a

Recuerdo cuando la navegación se hacía con float y pasaba 2 horas buscando el elemento contenedor colapsado.

Los " display: block; " indican que el elemento se colocará uno debajo del otro, sin importar el tamaño o el contenido.
.
Los " display: inline; " indica que el elemento se posicionará a la derecha del otro.
.
Los " display: inline-block; " Ocupan todo el tamaño del contenido y permite posicionar más elementos a la derecha.

inline-block toma lo mejor del display inline y el display block

Increíble, ya había visto este tema pero nunca entendí bien lo de inline, block o inline-block y esta explicación me ha ayudado mucho!!!

Practica de tipos de display en CSS 😎.
.

Algunos tipos de Display y sus características:
.
Block: Este tipo de valor ocupa todo el tamaño de largo de nuestra pantalla, pero además de eso se le pueden aplicar ciertas características como:

• Tamaño lado (width).
• Tamaño de alto (height).
• Y además un margen para separar el elemento de los bordes.
  .
  Inline: Este tipo de valor no se le puede aplicar un tamaño de ancho ni de alto, ya que su tamaño depende de su contenido, y si queremos aplicarle un margen este solo se verá afectado horizontalmente y no verticalmente.
  .
  Inline-block: Este tipo de valor no solo es un elemento tipo “inline” sino que también es un tipo “block”, lo que nos permite aplicarle características como las de un “block” normal

https://htmlreference.io/

Display Block

Los elementos Bloque <div> <p> utilizaran el 100% del espacio que tenga adelante sin importar el contendio tenga o no espacio.

Display Inline

Los elementos en linea <span> tiene por defecto el display inline y lo que hace es simpelemnte utilizar el espacio que tenga su contenido. no aceptan las propiedaes width y height

Display Inline-block

Es una combinacion de los display, lo que ocurre es que ocupan el 100% del tamañao del contenido y si hay espacio permiten que otros hermanos puedan ponerse uno enfrente del otro, permite agregar el margin arriba y abajo igual el padding, y tambien perimite manipular el width y height

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="Description" content="Extended Description">
        <meta name="robots" content="index,follow">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Display 1</title>
        <style>
            * {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
            }
            div {
                background-color: brown;
                /* Si tiene efecto */
                width: 200px;
                height: 200px;
                margin: 20px;
            }
            a {
                background-color: blueviolet;
                /* No tiene efecto */
                width: 200px;
                height: 200px;
                /* Si tiene efecto, solo a los laterales */
                margin: 20px;
            }
            button {
                background-color: crimson;
                /* Si tiene efecto */
                width: 100px;
                height: 35px;
                margin: 25px;
            }
        </style>
    </head>
    <body>
        <div>
            Bloque
        </div>
        <a href="/">Inline</a>
        <button>Inline-Block</button>
    </body>
</html>

¿Qué es el modelo de caja?

Clase 11 - Tipos de display más usados: block, inline e inline-block.

¿Qué es display en CSS?

• Es el tipo de visualización y comportamiento que tendrán nuestro elementos en pantalla.

¿Cuáles son los display más usados hoy en día?

• Block.
• Inline.
• Inline-block
• Flex.
• Grid.

¿Cuáles son los valores de display que comúnmente tienen los elementos HTML?

• Block.
• Inline.

¿Cómo es el comportamiento de un elemento que tenga en la propiedad display el valor de block?

• Un elemento con esta propiedad ocupará todo el ancho que tenga a su disposición, incluso si su contenido no lo necesita, ocasionando que cada elemento seguido de este aparezca debajo.
• Permite agregar al elemento las propiedades de margin, border y padding en todas las direcciones además de manipular sus width y height.

¿Cómo es el comportamiento de un elemento que tenga en la propiedad display el valor inline?

• Un elemento con esta propiedad ocupa únicamente el ancho que necesite su contenido, proporcionando este espacio vacío a otros elementos que pongamos seguido de este.
• No podemos usar las propiedades margin y padding en la parte superior e inferior, únicamente podemos usar estas propiedades a los lados.
• No se puede asignar un width ni un height a un elemento inline.

¿Cómo es el comportamiento de un elemento que tenga en la propiedad display el valor inline-block?

• Un elemento con esta propiedad ocupa únicamente el ancho que necesite su contenido, proporcionando este espacio vacío a otros elementos que pongamos seguido de este. En caso de que el contenido del elemento no deje colocar otro elemento, este hará que el siguiente aparezca debajo de él.
• Permite agregar al elemento las propiedades de width, height, margin, border y padding en todas las direcciones.

Yo recuerdo (no se si con Diego De Granda o con Juan David Castro) que se podia reiniciar nuestros estilos siempre con este codigo:

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

donde " box-sizing: border-box;" significa que adaptaria los margenes y el espaciado a la ventana del navegador donde estamos haciendo nuetros proyectos. Podrian utilizarlo aca cuando ustedes gusten.

✅

Por ahí también hay otras, inline-flex e inline-grid 🤭 que no son tan usadas pero son útiles

El modelo de caja es la manera en que se representan todos los elementos HTML en una página. Cada elemento genera una caja, el comportamiento de esa caja depende de su clasificación: si es de línea o de bloque.

Les dejo otro ejemplo…

lo entendííí

Mis apuntes en Notion💚

Jajaj

aja.

Aporte con mininos 🐈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="3_display.css">
    <title>Display</title>

    <style>
        h1{
            color: salmon;
        }
        p{
            width: 80%;
        }
        .enlinea{
            display:inline;
            margin: 10px;
        }
        .enbloque{
            display: block;
            margin: 10px;
        }
        .enlinea_bloque{
            display: inline-block;
            margin: 10px;
            height: 90px;
            width: 90px;
        }

    </style>

</head>
<body>
    <h1>Gatitos inline</h1>
    <img class="enlinea" src="https://placekitten.com/80/80" alt="">
    <img class="enlinea" src="https://placekitten.com/80/80" alt="">
    <img class="enlinea" src="https://placekitten.com/80/80" alt="">

    <h1>Gatitos block</h1>
    <img class="enbloque" src="https://placekitten.com/80/80" alt="">
    <img class="enbloque" src="https://placekitten.com/80/80" alt="">
    <img class="enbloque" src="https://placekitten.com/80/80" alt="">

    <h1>Gatitos inline-block</h1>
    <img class="enlinea_bloque" src="https://placekitten.com/80/80" alt="">
    <img class="enlinea_bloque" src="https://placekitten.com/80/80" alt="">
    <img class="enlinea_bloque" src="https://placekitten.com/80/80" alt="">

</body>
</html>

Display: Es el tipo de visualización que van a tener nuestros elementos en HTML. Las etiquetas de HTML tienen un equivalente (inline o block), es decir, muchos de nuestros elementos de HTML (todos básicamente) tienen un valor por defecto o un tipo de visualización, ya sea de tipo en “línea” o de tipo “bloque”, pero además de que existen estos 2 valores de visualización (en línea y en bloque), existe una que es la combinación de estos 2 tipos llamada “inline-block”.

Estuve practicando, y este fue el resultado. Este es el curso que me ha permitido integrar estos conocimientos básicos pero necesarios

Notes:

• Display hace referencia al tipo de visualizacion que tienen los elementos
• Los elementos ya cuentan con tipo de display por default
• El display de tipo block significa que el elmento ocupara todo el espacio a nivel de width de la pantalla, sin importar que hayamos limitado este ultimo cambiando su tamaño.
• El display de tipo inline solo ocupa el espacio que tenga su contenido y no podemos aplicarle margenes verticales ni alterar su tamaño.
• El display de tipo inline-block tiene lo mejor de ambos mundos pues nos permite tener elementos que solo ocupen el ancho de su contenido y ademas asignare margenes y modificar su tamaño.

Muy buena clase

al fin, después de tanto entiendo estos display jaja.
Resumen:
block:

1. ocupa todo ancho de la pantalla en un inicio.
2. si hay mas de un elemento en block se agruparan en vertical.
3. la caja si crece si se le da dimensión.
   .
   inline:
4. la caja solo ocupa el espacio del contenido.
5. lo márgenes top y buttom no funcionan, solo a los lados.
6. no se pueden alterar las dimensiones.
   .
   iline-block:
7. la caja solo ocupa el espacio del contenido.
8. se pueden alterar las dimensiones.
9. se puede usar los margin.
10. la caja ocupa el espacio

Ya me quedo más claro estos conceptos

display: block: El elemento se ubicará debajo de otro, sin importar el tamaño o el contenido.

display: inline: El elemento ocupa el ancho de su contenido y se ubicará a la derecha del otro.

display: inline-block: Ocupan todo el del contenido y permite posicionar elementos a la derecha.

display: block;
ocupa todo el ancho y podemos modificar el ancho y el alto
display: inline;
su tamaño es del contenido
display: inline-block;
su tamaño es del contenido pero si podemos modificarlo

estupendo, un buen repaso

Cada etiqueta HTML tiene un tipo de representación visual en el navegador
El comportamiento de los elementos HTML puede cambiarse mediante la propiedad CSS display.

Un elemento a nivel de bloque SIEMPRE comienza en una nueva línea y ocupa todo el ancho disponible (se extiende hacia la izquierda y hacia la derecha tanto como puede).

Block: El elemento se comporta como un bloque, SIEMPRE comienza en una nueva línea y ocupa todo el ancho disponible de su etiqueta contenedora. Los elementos con display: block pueden tener un ancho y un alto especificados.

inline: El elemento se adapta al ancho de su contenido, ocupando solo el ancho necesario y se posiciona en la misma línea que los elementos vecinos. Los elementos con display: inline no pueden tener un ancho o alto especificado.
Ignora width height y el margin que acepta es solo a los lados.

inline-block: Combinación de los dos anteriores.El elemento se comporta como un elemento inline, pero también permite especificar un ancho y un alto.

Listo hacer millones C:

Los elementos de bloque no hacen tanto caso. 😃

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display</title>
    <style>
        body {
            margin: 0;
        }
        div {
            background: salmon;
            width: 200px;
            height: 200px;
            margin: 20px;
        }
        a { 
            background: skyblue;
            margin: 20px; /* Solamente aplica horizontalmente pero no aplica verticalmente*/
        }
        button {
            background: slategray;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>Bloque</div>
    <a href="#">InLine</a>
    <button>inline block</button>
</body>
</html>

Display

La forma en que se distribuyen los elementos en el DOM

Hay elementos que por defecto son block, inline o ambas pero las propiedades que se podrán usar variaran según su display asignado. Por ejemplo un elemento de tipo block podrá ajustar su tamaño(with, height) como le indiquemos contrario a uno inline que le sera imposible pero a su vez trae sus propiedades como solo márgenes horizontales.

• Los valores de la propiedad CSS “display” determinan cómo se muestra un elemento en el flujo del documento. Aquí están los tipos de display más comunes:

1. block:

• Los elementos de tipo “block” generan un nuevo bloque en la página y ocupan todo el ancho disponible por defecto.

• Los elementos “block” comienzan en una nueva línea y se apilan verticalmente uno después del otro.

• Algunos ejemplos de elementos “block” son: <div>, <p>, <h1>-<h6>, <ul>, <li>, <section>, <footer>, etc.
  inline:

• Los elementos de tipo “inline” no generan un nuevo bloque y se muestran dentro del flujo normal del texto.

• Los elementos “inline” solo ocupan el espacio necesario para su contenido y no forzan saltos de línea.

• Pueden aparecer uno al lado del otro en la misma línea.

• Algunos ejemplos de elementos “inline” son: <span>, <a>, <strong>, <em>, <img>, <input>, <button>, etc.
  inline-block:

• Los elementos de tipo “inline-block” combinan las características de los elementos “block” e “inline”.

• Se muestran en la línea de texto, pero permiten establecer un ancho y altura, y se pueden posicionar verticalmente uno después del otro.

• Los elementos “inline-block” ocupan solo el espacio necesario para su contenido.

• Algunos elementos, como <img> y <input>, son “inline-block” de forma predeterminada.

• Estos son los tres tipos de display más utilizados en CSS: “block”, “inline” e “inline-block”. Sin embargo, también existen otros valores para la propiedad “display” en CSS, como “flex”, “grid”, “table”, entre otros, que ofrecen diferentes formas de controlar el diseño y la presentación de los elementos en una página web.

Gracias por la clase profe…

Super clara la explicación

El display block **establece que un elemento ocupará todo el espacio disponible por defecto y el siguiente elemento a este se situará por debajo.

Las propiedades de los tipos de display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display</title>
    <style>
        body{
            margin: 0;
        }
        div{
            background-color: salmon;
            width: 256px;
            height: 256px;
        }
        a{
            color: blue;
            background-color: yellow;
            width: 256px;
            height: 256px;
            margin: 256px;
        }
        button{
            margin: 0;
            margin-top: 30px;
            background-color: black;
            color: white;
            width: 160px;
            height: 25px;
        }
    </style>
</head>
<body>
    <div>bloque</div>
    <a href="">inline</a>
    <button>click</button>
</body>
</html>

Oww… Qué mal que HTML Reference no indique cuando el display por defecto de un elemento es “inline-block” y simplemente lo muestre como “inline” sin más. Qué chimbo… I feel disappointed 😔.

La propiedad displayestablece el tipo de visualización de los elementos HTML sin afectar el flujo normal de los elementos.

Display block:

• Ocupan todo el espacio disponible
• El siguiente elemento se situara por debajo
• Se les pueden añadir anchura y altura(with & height)
• Se les puede agregar todas las propiedades del modelo de caja

Display inline:

• el elemento ocupara el espaci del contenido del mismo
• el siguiente elemento se situara a la derecha
• No se les puede añadir anchura y altura
• No se les pueden agregar todas las propiedades del modelo de caja

Display inline-block:

• Combina lo bueno de ambos mundos

Display none:

• Desactiva la visualizacion del objeto, como si no existiera

Hace mucho que no hacía web, retomandolo nuevamente me siento feliz de los conceptos que estoy reforzando y sobre todo por los nuevos que voy aprendiendo, sin duda este es un buen curso y Estefany una excelente maestra.

Excelente la clase, una forma clara y concisa de explicar estos conceptos!!!

.

Geniaaal, me encanta esta clase porque tenía full dudas de cómo aplicar estilos, pues veía que en algunos elementos se aplicaban y en otros no. Ya logro ver porqué sucede, ¡gracias! 😍

El display define el tipo de visualización de un elemento HTML

No sé si a los demás les haya pasado, que se duplica el estilo que se le coloca al div al correr el código. Lo he solucionado con ayuda de la IA, me sugirió añadirle un id como identificador al div.

oye ya hice un curso similar, que complicado aprender como enseñas, nos estoy diciendo que este mal solo que por mas que entiendo estos temas como tu enseñas NO

Genial, sencillo y al grano, muchas gracias, por fin entendí este tema.

🚀💚 Listo conceptos asimilados

inline: se acomodan lado a lado y tienen limitaciones al estilizarlos
block: se acomodan uno debajo de otro y tienen mas libertar al estilizarlos
inline-block: se acomodan lado a lado (tiene eso de inline) y tienen mas libertad al estilizarlos (tiene eso de block)

Hola ¡!! Quisiera saber cómo puedo descargar el material teórico para imprimirlo, muchas gracias ¡!¡

Teffy mintió, esos no son los más utilizados 😣 los más utilizados los veremos en la siguiente clase jajaaja 😎

Me gusta mucho la forma de enseñar de la profe Teff se merece todos los likes.

Los tres tipos de display van a variar según la etiqueta usada y las características por defecto que esta tenga. Dónde se evidenciará que si se busca modificar dicha etiqueta puede que si se pueda realizar o no, todo dependerá de las características que esta tenga.

Display más usados

<code> 
 <style>
    body {
      margin: 0;
    }
    /*Tipo block*/
    div {
      background: salmon;
      width: 200px;
      height: 200px;
      margin: 20px;
    }
    /*Tipo inline*/
    a {
      background: skyblue;
      /*Sin efecto*/
      width: 200px;
      height: 200px;

      margin: 20px;
    }
    /*Tipo inline block*/
    button {
      background: slateblue;
      width: 200px;
      height: 200px;
    }
  </style>

En RECURSOS:
donde escribe colo debería decir colocar

Visualización de bloque y línea (inline-block)
El display inline-block combina las ventajas de bloque de colocar medidas al elemento y propiedades del modelo de caja correctamente; con las ventajas de inline de -color- colocar un elemento seguido de otro en el mismo espacio.

Si elemento excede el contenido total, se coloca en la siguiente línea por debajo.

TIPOS DE DISPLAY

Block: background, width, height, margin.

inline: background, pero no se puede aplicar el width, height y margin.

e inline-block: background, width, height, margin. ( ya que tiene tambien características de block )

https://htmlreference.io/

Hola. Les comparto este repositorio que sirve de guía para el examen final, pues contiene las preguntas que se encuentran en el examen, la justificación y el video del curso donde se habla sobre eso. Espero y les sea de utilidad 😄.
Platzi-Test

Mis apuntes en Notion

Muy entendible, la imagen de los display!!! 😄

He de decir que siempre he tenido muchos problemas con este tipo de temas, pero con esta clase lo he entendido como si fuera algo tan sencillo.

Creo que no es buena explicando, recurre demasiado a la oralidad cuando ciertos ejemplos podría mostrarlos en código directamente, y cuando va al código los ejemplos son acelerados, abstractos ya veces resumidos (como si la corriese el tiempo) yo comprendo porq busco lecturas (y ya comprendía sobre html y css) pero creo que podría mejorar.

He estado usando todo lo que he ido aprendiendo en este curso pero use una técnica un poco extraña pero me ha funcionado muy bien talvez a alguien le puede servir también.

Busque un portafolio de alguien mas y mientras voy aprendiendo estoy intentando replicarlo, ahora mismo sin animaciones si no una web estática, pero al intentar replicarlo se van a encontrar con los mismos problemas que un desarrollador tuvo al crearla, la mejor manera de aprender a programar es programando.

Y algo muy importante a veces no sabrás cual es el problema no te rindas mírate las clases de nuevo, prueba y busca la documentación lo lograras.

Los elementos inline no aceptan valores como height y width
inline block si los acepta y permite más elementos a su lado
block abarca toda la pantalla

Agregar propiedades al div: background (color del fondo), width (ancho del bloque), heigth (alto del bloque).

Les dejo aquí mis apuntes en PDF, tomados en Notion:
https://drive.google.com/file/d/18hCJ_NTKf6PARw87PkMueSAoMCKHgE5A/view?usp=sharing

Aprender a usar los Display es muy importante para controlar la ubicación de los elementos.

Esta profe se pasa de lo increíble y sencillo que explica cada tema.

me gusta mucho grid pero con flex se puede adaptar mas facil una pagina

Resumen En Notion
https://n9.cl/a7jz1

El concepto de display y la importancia que este tiene.
Display:
La propiedad display especifica el comportamiento o visualización del elemento “caja”, el cual define como se debe comportar ese elemento, por ejemplo, su comportamiento lo podemos definir por ciertos valores de esa propiedad display:

• inline
• block
• inline-block

Además de que existen otros valores como:

• Flex
• Grid
  .
  Pero debemos entender que existen ciertos tipos de visualización que establece la propiedad display como:
• Interna
• Externa

¡¡Genial, poco a poco se aumenta el nivel de complejidad!!

Muy buena clase pa ser honesto!

tal cual

<a href="/">inline</a>

Me parece muy interesante

😊

Siempre hay que tener en mente que Grid no reemplaza a Flex. Ambos pueden trabajar juntos y, es mas, son complementarios.

Siempre se aprende algo nuevo con Teff. Genial el curso.

Qué maravilla poder aprender todo esto.