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

Les comparto mis apuntes. 😄

Display

Se refiere al tipo de visualización que van a tener nuestros elementos HTML.

Block

Una de sus características es que ocupan todo el width disponible en pantalla por defecto, se le puede agregar o cambiar un ancho y largo.

Inline

El espacio que ocupa es el espacio que tiene como contenido, no se le puede modificar su width y height.

Inline-block

Agarra lo mejor de inline y de block, el espacio que ocupa es el espacio que tiene como contenido y además se le puede modificar su width y height.

Su visualización es de tipo inline pero tiene características de block

Otros apuntes

Curso Definitivo de HTML y CSS

Clase

Display

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

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

Ejemplo Gráfico

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

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

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.

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?

Jajaj

aja.

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 😎.
.

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

.

Mis apuntes en Notion💚

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

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.

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

lo entendííí

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

esta es la pagina que esta usando la profe

https://htmlreference.io/

¡¡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.

Tipos de visualizacion:

• block
• inline
• inline-block
• grid
• flex

Flex

Apuntes de la clase
Display: block
Ocupa todo el ancho
Podemos modificar sus propiedades de modelo de caja ( como el ancho y alto).
Display: inline
Su tamaño es del contenido
No podemos modificar sus propiedades de modelo de caja (algunas si pero no de la forma esperada).
Display: inline-block
Su tamaño es del contenido
Podemos modificar sus propiedades de modelo de caja.

tipo bloque (div)
se le puede cambiar el alto y ancho
agarra margin arriba y a los lados
toma el tamaño horizontal
.
tipo inline (a)
no tiene valides con alto ni ancho
se aplican margenes a los lados pero
no arriba ni abajo
.
tipo inline-block (button)
complementa la vista de inline pero se
comporta como block al permitir
cambiarle el tamaño y el margin

Excelente explicacion! una lastima que en la pagina de referencias HTML no te especifique cuando es inline-block!

Les comparto mis apuntes con código:

codepen-display