Fundamentos de Display en CSS: Bloque, Inline y Flujo Normal

Clase 3 de 28 • Curso de Diseño Web con CSS Grid y Flexbox

Resumen

¿Qué es el display en CSS?

El concepto de "display" en CSS se refiere a la manera en que se visualizan o presentan los elementos HTML en la página. La propiedad display define si un elemento se muestra como un bloque, una línea o de alguna otra manera específica. Es fundamental comprender estos comportamientos para poder manejar los diseños en CSS con flexibilidad y precisión.

¿Cuál es la diferencia entre block e inline?

Los elementos de bloque y en línea son la base del flujo normal del documento en HTML y CSS:

Elementos de bloque (display: block): Se extienden por todo el ancho disponible de su contenedor. Pueden tener márgenes, bordes y rellenos. Ejemplos son las etiquetas <div>, <h1>, <p>, etc.
Elementos en línea (display: inline): Se comportan como palabras en un texto, ocupando solo el espacio necesario para su contenido. No inician una nueva línea. Dentro de los elementos en línea encontramos etiquetas como <span>, <a>, etc.

Al observar la definición de MDN sobre los elementos de bloque e en línea, queda claro que el diseño de bloque y en línea es crucial para CSS al garantizar que el documento HTML sea legible por defecto.

¿Qué implica el flujo normal del documento?

El flujo normal del documento se refiere a cómo los elementos HTML se disponen de manera predeterminada en una página, sin estilos adicionales. En este flujo:

Los elementos de bloque se apilan verticalmente, uno debajo del otro.
Los elementos en línea se sitúan consecutivamente en la línea del texto, permitiendo la continuidad del contenido en una sola fila.

¿Cómo trabajan conjuntamente block, inline, grid y flex?

Cuando se introducen valores como grid o flex, se empiezan a modificar los comportamientos internos y externos de los elementos:

Block Grid y Block Flex:
- Funcionan a nivel externo como elementos de bloque.
- Internamente, presentan propiedades de cuadrícula o flexibles.
- Ejemplo: display: block grid; y display: block flex; se mostrarán igual en el exterior, pero diferirán en su organización interna.
Inline Grid y Inline Flex:
- Operan externamente como elementos en línea.
- Internamente, mantienen las características de una cuadrícula o un diseño flexible.
- Ejemplo: display: inline grid; y display: inline flex; semejan palabras en una línea de texto, ofreciendo sin embargo la configuración interna tipo cuadrícula o flexible.

Esta forma de entender display es esencial para desarrollar CSS más robusto y accesible, permitiendo una mejor comprensión y un código más limpio.

¿Qué beneficios obtenemos al respetar el flujo normal del documento?

Legibilidad y fluidez: Un diseño que respeta el flujo normal es más agradable y fácil de leer.
Simplicidad en CSS: Al entender los comportamientos predeterminados, escribimos un CSS más simple y eficiente.
Mejor accesibilidad: Alinearnos con el flujo normal ayuda a los lectores de pantalla y dispositivos asistivos a interpretar mejor el contenido.

El conocimiento de estos conceptos te permitirá manejar de manera más efectiva los diseños en CSS, mejorando la experiencia de usuario y la accesibilidad, y logrando que tus proyectos sean más profesionales y coherentes. ¡Sigue practicando y experimentando con estos conceptos para dominar el CSS!

John Cardenas

student•

Que buen dato el que Estefany dió en el minuto 03:02. Básicamente:

display: inline-flex;

En este caso, flex es el comportamiento interno del contenedor, mientras que inline es el comportamiento externo del contenedor ante todo el HTML. Lo mismo pasa con inline-grid y también con grid y flex (que en realidad son block-grid y block-flex). . Primer valor: Comportamiento externo de un contenedor. Segundo valor: Comportamiento interno de un contendor.

Irving Juárez

student•

Muy bien resumido. . Aunque creo que lo que Estefany menciono al final acerca del villano no es del todo cierto. El inline-block es muy útil para poner un logo enfrente de un texto, ya que con este atributo (inline-block), tenemos un elemento que permanece en la linea pero que tiene ancho, largo, padding y margin. Toda una delicia.

José Luis Encastin Flores

student•

No lo había visto desde esa perspectiva John, muchas gracias por la aclaración.

Fernando Quinteros Gutierrez

student•

📄 Flujo normal del documento: Display block, inline e inline-block

Ideas/conceptos claves

Display ⇒ Verbo: desplegar, colocar a la vista, exhibir, lucir, mostrar, presentar

flujo normal del documento ⇒ como se comportan los elementos HTML por defecto

Apuntes

Display ⇒ Definir el tipo de visualización de un elemento
Cuando usamos display: flex; o display: grid; Nos centramos más en los valores y no en la propiedad por si sola

Block and Inline elements

Block ⇒ Se extienden ocupando todo el espacio disponible para ellos
Inline
- Son como palabras en una oración, una después de otra
- Se separan por medio de un espacio en blanco entre ellos

El comportamiento de los elementos en bloque y en línea es fundamental para CSS y el hecho de que un documento HTML marcado correctamente será legible por defecto. Este diseño se conoce como "Diseño de bloque y en línea" o "Flujo normal" porque esta es la forma en que los elementos se presentan si no les hacemos nada más.

Inner y Outer

Block e Inline definen:
- Valor externo de visualización
- Valor interno de visualización
Lo que significa es que cuando usamos display: grid; estamos diciendo display: block-grid;
Un elemento que tenga los atributos de bloque puede establecer:
- Ancho
- Alto
- Padding
- Margin
- Estirarse en todo el espacio
Pero los hijos de un contenedor display: grid; se les ha dado un valor interno de grid
Esta forma de pensar es util porque cuando usamos display: inline-flex;
- Pensaremos que el primer valor es el comportamiento externo y el segundo valor es el interno del contenedor
Siempre volveremos al flujo normal del documento
- Si trabajamos de esta forma obtendremos:
  - Flujo más agradable y legible
  - CSS mucho más fácil
  - Menos probable de tener problemas de accesibilidad (ya que está trabajando con el orden de los documentos que es exactamente lo que está haciendo un lector de pantalla o una persona que revisa el documento)

RESUMEN: El flujo normal del documento sera la forma en que se mostraran los elementos si no modificamos nada, se basan en block e inline ambas propiedades se usan a lo largo del desarrollo como cuando usamos display: grid; o display: inline-grid; estarás marcando de alguna forma si el comportamiento externo es de bloque o en línea además que en la segunda propiedad indicas que comportamiento interno tendrá.

Miguel Giraldo Duque

student•

Gracias por el aporte crack :)

Matías Wasiak

student•

Muchas gracias por el aporte!

Carlos Eduardo Gomez García

teacher•

Aquí hay algunos conceptos fundamentales de entender que aprendimos en el Curso de CSS Grid Layout 👀. . Aquí se empieza a trabajar de una forma diferente con las propiedades CSS, ya no los llamamos "vertical", "horizontal", "derecha", "izquierda". sino que, ahora teniendo en cuenta los diferentes modos de escritura, empezamos a pensar de una forma diferente, ahora tenemos elementos tipo inline o block y tenemos start y end. .

Elementos inline: Son los elementos que comúnmente conocemos como horizontales, aunque realmente este concepto puede cambiar si cambiamos el modo de escritura
Elementos block: Son los elementos que comúnmente conocemos como verticales, aunque realmente este concepto puede cambiar si cambiamos el modo de escritura

. Esto es muy importante tenerlo en cuenta al momento de hablar de Flexbox y CSS Grid porque es la nueva forma de como tenemos que empezar a ver a CSS 👀.

Manuel Duarte

student•

De manera predeterminada, el contenido de un elemento de nivel de bloque es el 100% del ancho de su elemento padre y su altura viene determinada por su contenido. Los elementos en línea tienen su altura y anchura determinados por su contenido. No puedes establecer el ancho o la altura de los elementos en línea, simplemente se ubican dentro del contenido de los elementos de nivel de bloque. Si deseas controlar el tamaño de un elemento en línea de esta manera, debes configurarlo para que se comporte como un elemento de nivel de bloque con display: block; (o incluso, display: inline-block;, que combina características de ambos). . EJEMPLO .

<h2>Flujo de los documentos básicos</h2>

<p>Soy un elemento básico de nivel de bloque. Mis elementos de nivel de bloque adyacentes se encuentran en líneas nuevas debajo de mí.</p>

<p>Cubrimos por defecto el 100% del ancho de nuestro elemento principal, y somos tan altos como nuestro contenido secundario. Nuestro ancho y alto total es nuestro contenido + área de relleno + ancho/alto del borde.</p>

<p>Estamos separados por nuestros márgenes. Debido al colapso del margen, estamos separados por el ancho de uno de nuestros márgenes, no por ambos.</p>

<p>Los elementos en línea <span>como este</span> y <span>este otro</span> se ubican en la misma y la de los nodos de texto adyacentes, mientras hay espacio en la misma línea. Si un elemento en línea desborda, <span>sigue por la línea siguiente, si es posible (como la que contiene este texto)</span>, o simplemente pasa a una línea nueva, como hace esta imagen: <img src="https://s2.qwant.com/thumbr/0x380/f/a/a1d574eae9a53f2a03977244442557544cd0074c90697b391e1e2d09255b3a/Dragon-Ball-Z-Kakarot_Goku.png?u=https%3A%2F%2Fassets.rpgsite.net%2Fimages%2Fimages%2F000%2F083%2F181%2Foriginal%2FDragon-Ball-Z-Kakarot_Goku.png&q=0&b=1&p=0&a=1"></p>

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: rgba(255,84,104,0.3);
  border: 2px solid rgb(255,84,104);
  padding: 10px;
  margin: 10px;
}

span {
  background: white;
  border: 1px solid black;
}```

Paolo Joaquin Pinto Perez

student•

Buen aporte!

Matías Wasiak

student•

Muchas gracias por el aporte!

Jair Yara

student•

Inner y outer hacen alusión a los comportamientos de los elementos internos y externos? No entendí bien esa parte

Estefany Aguilar

teacher•

Así es Jair ! 🤗

Inner: Comportamiento con sus elementos internos (hijos). Outer: Comportamiento con elementos hermanos o padres.

Jair Yara

student•

Gracias profe 😊

Ángel Jesús Vásquez Castro

student•

La propiedad display tiene dos valores:

El primer valor representa el comportamiento externo del contenedor:

display: flex;  y display: grid;

se comportaran como elementos block es como si tuvieramos :

display: block-flex;  y display: block-grid;

Con respecto a los otros elementos padres se ubicaran uno debajo sin importar el ancho que pueda utilizar dicho elemento.

Mientras que los elementos con propiedad:

display: inline-flex;  y display: inline-grid;

Se posicionaran uno después del otro en forma lineal:

El segundo valor representa el comportamiento interno del contenedor:

display: grid;

Por defecto los contenedores hijos valor grid se comportaran de esta manera:

Mientras que con flex como segundo valor tenemos lo siguiente:

display: flex;

Independientemente que tenga inline o block su valor interno dependera del segundo valor. (recordemos que si no le colocamos el primer valor a el display se tomara como valor block.

Alejandro Mejia Escobar

student•

Amo utilizar inline-block por que me permite posicionar elementos en linea, sin necidad de usar el fastidioso float (al que luego toca hacerle un clear), y a la vez puedo definirle al elemento ancho, alto y margen. Con estos cursos de Teff estoy aprendiendo que con flex y grid se puede lograr lo mismo y mucho más... Pero los confieso, soy #teamVillanoInlineBlock :smiling_imp:

Jhaider Jordan

student•

espero que les ayude a comprer mejor estos conceptos DISPLAY : FLEX

DISPLAY : GRID

los inline simpre toman el ancho y alto de su contenido

Carlos Rodríguez

student•

Alguien tendrá el pdf de los slides de todas las clases en un sólo pdf

Estefany Aguilar

teacher•

Muy buena pregunta 🤔

Luis Suarez

student•

Hola

Estefany Aguilar

teacher•

Hola !

Ariel Hernán Contini

student•

Block e Inline definen: El valor externo de visualización y el valor interno de visualización.

Juan José García Sosa

student•

quedé 🤯 solo con esta clase FrontEnd dev + 1 level up !

Reinaldo Mendoza

student•

jaja, si, no este concepto seguro que no lo conocen gente con experiencia incluso

Joel Eduardo Sánchez Herrera

student•

Display:

Diccionario: Desplegar, Color a la vista, exhibir,
CSS: Define el tipo de visualizacion del elemente

Nos centramos mas en los valores y no en la propiedad

Bloque: Se extienden ocupando todo el espacio disponible entre ellos
Inline: Son como palabras en una oracion: Se separan por medio de un espacio blanco entre ellos

Estos definen el valor externo de visualizacion y el valor interno de visualizacion.

Display:Grid realmente es un Display:Block Grid

Los bloques tienen ancho,alto, padding margin y estirarse en todo el espacio.

A los elementos internos del contenedor gird se les ha dado un valor interno de grid.

Ahora sabemos que el display:Flex es realmente un display:inline-flex

Siempre volveremos al flujo normal del documento, esto es como se comportan los elementos de HTML por defecto.

BENEFICIOS DE TRABAJR CON EL FLUJO NORMAL:

Flujo mas agradable y legible
CSS mucho mas facil
Menos problemas de accesibilidad

Matías Wasiak

student•

Gracias por el aporte!

Naldo Duran

student•

👌

Lucas Jonathan Silva

student•

Esta clase es casi una disertación filosófica sobre el "flujo normal". Con los diversos tipos de display podemos alterarlo en un espacio específico de la página, pero luego volveremos a él de todos modos. Muy interesante, muchas gracias Estefany por traernos estos datos que nos proporcionan un entendimiento más profundo de lo que hacemos. El curso anterior estuvo plagado de datos como este. Ojalá te veamos en más cursos 💚

Yasmil Gonzalez

student•

inline-block es la fusion de lo mejor de block y lo mejor de inline, acepta margin-padding arriba y abajo, ocupan el 100% del contenido, aceptan otras elementos a los lados y width-height

David Limon

student•

Creo que hace falta un tercer curso pero ahora practico, para salir de dudas y que quede un poco mas claro cada concepto...

eduar guerrero

student•

Ariel Hernán Contini

student•

Display: Verbo de Desplegar, colocar a la vista, exhibir, lucir, mostrar, presentar.

Jeisson Felipe Rodriguez Prieto

student•

diferencia entre block e inline

Fundamentos de Display en CSS: Bloque, Inline y Flujo Normal

Descubre qué ha cambiado en nuestro medio

Diseño Web Avanzado con CSS Grid y Flexbox

Conceptos que forman parte del diseño en CSS

Conceptos Fundamentales de Diseño CSS: Display y Posicionamiento