Tipos de Display en CSS: Inline, Bloque e Inline-Block

Clase 11 de 24 • Curso de Frontend Developer

Resumen

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

Existen etiquetas que por defecto su display ya está determinado, como la etiqueta <div> que tiene display block, <span> tiene display inline y <button> tiene display inline-block.

Abordaremos los tipos de display block, inline e inline-block a continuación.

Visualización en bloque (`block`)

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

Es posible añadir medidas de anchura width y altura height a estos a elementos.

También es posible agregar todas las propiedades del modelo de caja (no te preocupes de este concepto, ya lo abordaremos).

Ejemplo de display block

Visualización en línea (`inline`)

El display inline establece que un elemento ocupará el espacio del contenido del mismo y el siguiente elemento se situará a la derecha.

No es posible añadir medidas de anchura width y altura height a estos a elementos.

También, no es posible agregar todas las propiedades del modelo de caja, únicamente funcionará la propiedad margin en el eje horizontal (no te preocupes de este concepto, ya lo abordaremos).

Ejemplo de display inline

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 un elemento seguido de otro en el mismo espacio.

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

Ejemplo de display inline-block

Visualización nula (`none`)

El display none desactiva la visualización de un elemento, como si el elemento no existiera.

Ejemplo de display none

Contribución creada por Andrés Guano (Platzi Contributor).

Carlos Eduardo Gomez García

teacher•

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 💚).

Esteban Blanco Ortuno

student•

Antes no existia CSS y se hacia todo con HTML, por eso me cuesta tanto entender el CSS. Me mal acostumbre.

Reynaldo Fuentes Garcia

student•

Muchas gracias RetaxMaster.

Luis Fernando Rodriguez Boett

student•

Imaginense aprender los de los float

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

Enrique Reyes

student•

JAJAJA la imagen es la viva representación de la realidad de trabajar con floats, realmente CSS Grid y Flexbox te ahorran mucho tiempo.

Jesús Enrique Morocoima Marcano

student•

jajajajaajaj te pasas

Thomas André Dale Guevara

student•

Jorge Ayala

student•

Muy buen aporte

Hernán Josué Hernández Lamprea

student•

Excelente aporte

Dario Paladines

student•

Una imagen que resume los tipos de display

Jeni Cartagena

student•

Muchas gracias, la imagen es muy ùtil

Carmen Álvarez M.

student•

Gracias por compartir :)

María Del Pilar Chávez Gutiérrez

student•

Jesús Velázquez Jiménez

student•

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.

Reynaldo Fuentes Garcia

student•

🍫 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>, <h2>...<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

Edixon javier Pabon Lizcano

student•

Muchas gracia, que buen resumen.

Andrés Felipe Lopez gomez

student•

Edwin Rodríguez

student•

Daniel Reymundo

student•

Super

Joel Dominguez Merino

student•

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

Porfirio González López

student•

Ejemplo Gráfico

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

Daniel Reymundo

student•

Buen aporte

Alejandro Jimenez

student•

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

Diego Fernando Caviedes Camaho

student•

pudo colocar un div como inline?

Christopher Andrés Guano Valencia

student•

Hola! Sí, con display: inline :DD

Luis Fernando Nuñez Rangel

student•

Puedes hacerlo fácilmente con display y colocarle que se muestre 'inline'

div{
	display: inline;
}

Alejandro de Jesús Escareño Flores

student•

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.

Platzi Team

student•

Practica de tipos de display en CSS 😎. .

Manuel Fernando Jamaica Prieto

student•

O sea que con el display de tipo block es que se puede armar un sitio web mas modular, como a modo de ventanas multicolor?

Estefany Aguilar

teacher•

Hola, Manuel ! Todos los tipos de display tienen un papel súper importante, así que, no solo display block te permitirá realizar cierto tipo de web sino, un conjunto de elementos con varios tipos de display :)

Julian Roa Villamil

student•

Hola, me pasa algo super raro con el div bloque, me esta creando dos div a pesar de que en el código solo tengo uno...

<!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-1</title>
    <style>
        body{
            margin: 0%;
        }
        div{
            background-color: salmon;
            width: 200px;
            height: 200px;
            margin: 20px;
        }
        a{
            background-color: aqua;
            width: 200px;
            height: 200px;
            margin: 20px;
        }
        button{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div>bloque</div>
    <a href="/">inline</a>
    <button>inline block</button>
</body>
</html>

Estefany Aguilar

teacher•

Hola, Julián ! Replicando tu código, solamente me salen 3 elementos en el navegador. En tu pantallazo, se me hace extraño el div con clase container_selected... y el div con id scrnli_recorder_root (justo debajo de la etiqueta input). De dónde salen ? Como estas usando un selector de elemento div, se están coloreando de color salmón todos los div's que existan en tu aplicación. La idea sería usar selectores más específicos para que esto no suceda (como selectores de clase) 😊

Will Carlo

student•

Me salió el mismo error al usar el LiveServer. LA profesora tiene razón, lo importante es especificar (darle una clase o ID) para evitar este error del DIV.

Josué Ramírez Hernández

student•

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

Valeria Viridiana Medina Basilio

student•

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!!!

Anggi Vanesa Pallares Solis

student•

Tipos de Display en CSS: Inline, Bloque e Inline-Block

Visualización en bloque (block)

Visualización en línea (inline)

Visualización de bloque y línea (inline-block)

Visualización nula (none)

Visualización en bloque (`block`)

Visualización en línea (`inline`)

Visualización de bloque y línea (`inline-block`)

Visualización nula (`none`)