CSS: Display Block, Inline e Inline-Block

Contenido del curso

Web Developer Fundamentals

HTML

Etiquetas multimedia

Formularios

CSS

Responsive Design

Accesibilidad

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:52

CSS: Display Block, Inline e Inline-Block

Curso Definitivo de HTML y CSS

Clase 39 de 56

Clase 39 / 56

Comentarios (230)230 comentarios

Alejandro Ramos

Hace 6 años

Imagen de apoyo sobre los diferentes tipos de Display:

Javier Romero

Hace 6 años

gracias por tu aporte es muy importante tener muy claro eso en display

Joel Dominguez Merino

Hace 6 años

Gracias por la imagen, refuerza mucho lo visto en clase :)

Gonzalo Vidal

Hace 6 años

Mi resumen:
En un elemento con display:inline no puedo usar margin ni padding arriba ni abajo, solo derecha e izquierda. Tampoco se puede aplicar width o height.

En un elemento con display:block el contenido del elemento toma el 100% del width, se puede usar margin y padding por todos los lados.

En un elemento con display:inline-block, se puede usar margin y padding por todos lados, así como darle width y height, y el contenido es del mismo tamaño que el elemento.

Etiquetas como p y div vienen por Default con un display:block
Etiquetas como span viene por Default con un display:inline

María José Ledesma

Hace 6 años

Excelente aporte!

Joel Dominguez Merino

Hace 6 años

Buen resumen, Gracias!

Carlos Rodela

Hace 6 años

Los elementos inline sólo ocupan el espacio necesario para mostrar sus contenidos.

Elementos inline:
<a> <span> <img> <b> <i> <small> <cite> <code> <em> <strong> <br> <button> <input> <label> <select> <textarea>

Mientras los elementos block ocupa todo el espacio disponible hasta el final de su línea, aunque sus contenidos no ocupen todo el sitio.

Elementos block:
<div> <article> <section> <header> <footer> <aside> <table> <p> <video> <ul> <ol> <h1> <h2> <h3> <h4> <h5> <h6>

Los elementos inline-block conservan las propiedades mas importantes de los elementos inline y block.

Emily Valentina Gaitan Velasco

Hace 5 años

esto era lo que yo necesitaba, gracias por tu aporte!

Jorge Luis Rueda Marin

Hace 5 años

Gracias, buena aporte.

MIGUEL EDUARDO OCHOA ARANGUREN

Hace 6 años

Josemaria Ponce Cajavilca

Hace 6 años

Buen aporte

MIGUEL EDUARDO OCHOA ARANGUREN

Hace 6 años

gracias. estamos trabajando Duro..

Marcos Rubén García Ayala

Hace 6 años

Les recomiendo la extención Pesticide, sirve para ver qué tanto espacio está ocupando cada etiqueta en tu página. 100% recomendada. Peticide Extencion

Daniel Torrealba Febres Cordero

Hace 6 años

Está muy buena.

Daniel Vergel

Hace 6 años

ya la descargue muy buena

Joel Dominguez Merino

Hace 6 años

En esta clase vimos los 3 tipos de display Base. Los cuales fueron:

Block: Estos toman el 100% del width, por lo que un elemento no puede posicionarse a un lado de el. Se le puede poner el width deseado, height deseado, añadir margin, padding sin problema. Pero recordando que ocupara este elemento todo el largo de una Fila por asi decirlo.

Inline: Estos elementos solo ocuparan el ancho dependiento de su contenido. Por lo tanto estos elementos si permiten que si un elemento cabe a lado suyo, se posicione este ahi. Las *desventajas es que no se les puede modificar el width, height, ni colocar margin u padding tanto top, como bottom.

inline-block: Este tiene la combinación de los 2 anteriores. Haciéndolo un mejor candidato para usarlo. Permite modificar su width, height, añadirle margin, padding sin problemas y lo mejor es que mientras que haya espacio a un lado suyo, este permitirá posicionar mas elementos ahi.

Ejemplo Puedes verlo Online Repositorio

Codigo HMTL

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width= device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>iJCode - Display</title>
  </head>
  <body>
    <h2 class="title">
      Elementos "< p >" con Display Block: Ocupa todo el Width del Viewport
    </h2>
    <div class="block">
      <p>Soy un Parrafo con display:block</p>
    </div>
    <div class="block">
      <p>Soy un Parrafo con display:block</p>
    </div>

    <h2 class="title">Elementos " < p > " con display: inline</h2>
    <div class="inline">
      <p>Soy un parrafo pero con display: inline</p>
      <p>Soy un segundo parrafo pero con display: inline</p>
    </div>

    <h2 class="title">Elements inline-block</h2>
    <nav>
      <ul>
        <li>Menu</li>
        <li>Cursos</li>
        <li>Tutoriales</li>
        <li>Tienda</li>
        <li>Contacto</li>
      </ul>
    </nav>
  </body>
</html>

Codigo CSS

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

html {
  font-size: 62.5%;
}

.title {
  width: 100%;
  text-align: center;
  margin: 1rem auto;
  font-size: 2rem;
  color: #322f3d;
}

.block {
  height: 60px;
  background-color: #87556f;
  width: 350px;
  margin-bottom: 2rem;
}

.block > p {
  font-size: 1.6rem;
  background-color: #1a1a2e;
  color: white;
  padding: 1rem 1rem;
  border: 2px solid #be5683;
  padding: 0.5rem 1rem;
  display: block;
}

.inline {
  height: 60px;
  background-color: #87556f;
}

.inline p {
  font-size: 1.6rem;
  color: white;
  border: 2px solid #be5683;
  background-color: #1a1a2e;
  display: inline;
  padding: 0.5rem 1rem;
  margin-right: 2rem;
  width: 1000px;
  height: 700px;
  margin-top: 50px;
  margin-bottom: 50px;
}

nav {
  background-color: #221f3b;
  height: 50px;
}

ul {
  margin: 0 auto;
  text-align: center;
  height: inherit;
}

ul > li {
  display: inline-block;
  font-size: 1.6rem;
  background-color: #6f4a8e;
  color: #ffe4e4;
  padding: 1rem 2rem;
  margin: 6px auto;
}

Juan David González Rodríguez

Hace 6 años

Gracias !! gran aporte :D

Laidon Manolo Ayala Dominguez

Hace 6 años

no se como usar el rem, me ayudarías ?

Carlos Eduardo Gomez García

Hace 6 años

Y además de estos existen muchos otros tipos de display, de los cuales hay dos muy interesantes, que son el display: flex; y el display: grid; Son práctiacamente lo mejor que le ha podido pasar a CSS porque hace que el posicionamiento de cajas sea extremadamente fácil

Dario Paladines

Hace 5 años

En que especificamente se puede usar el display flex? que lo estuve probando pero no supe como aplicarlo

Juan Pablo Felipe Delgado Salcedo

Hace 6 años

En VSCode, para duplicar una línea no es necesario la combinación de teclas Ctrl+C y luego Ctrl+V. Simplemente nos colocamos en la línea a duplicar y presionamos Shift+alt+flecha arriba o abajo dependiendo donde queremos que aparezca la nueva línea

Jorge Luis Rueda Marin

Hace 5 años

Excelente aporte compañero, muy útil.

José Manuel Silva

Hace 4 años

Que buen tip, gracias!

David Aguilera

Hace 6 años

walter castro

Hace 6 años

Amigo David, gracias por tu aportes me han servido mucho. Te quedo muy bueno. Walter Castro.

Rolando Mamani Salas

Hace 5 años

Gracias!

Iván Arcos

Hace 6 años

Reforcé esta clase con este link que les comparto:

Joel Dominguez Merino

Hace 6 años

Gracias por la imagen!

Juan Christopher

Hace 6 años

Gracias.

Carlos Mazzaroli

Hace 6 años

Este es mi proyecto de la clase anterior. Les dejo el repo por si quieren ver o mejorar el codigo https://github.com/CarlosMazzaroli/platzi-html_y_css_definitivo-RETO-Position ![](

Jose Roberto

Hace 5 años

Te quedo muy bien Carlos

Carlos Mazzaroli

Hace 5 años

Gracias 😆

Jesus Velasco

Hace 6 años

Chicos otro display interesante es el

display:none

Nos permite ocultar elementos de nuestro flujo

Juan Christopher

Hace 6 años

Gracias por el aporte.

Hace 6 años

Para reforzar. display:none; no renderiza el contenido en la página. Se puede puede obtener un resultado similar si se utiliza visibility:hidden; Sólo que en este caso, el contenido será renderizado, en otras palabras, sí existe dentro de nuestra página, pero está oculto.

Alvaro Robles

Hace 6 años

Recordar que la etiqueta padding, tiene 4 formas en la que podemos definirla:

En pixeles: Arriba 10, derecha 20, abajo 30 y izquierda 40

padding: <top> <right> <bottom> <left>;
padding: 10px 20px 30px 40px;

En pixeles: Arriba 10, derecha e izquierda 30 y 10 abajo

padding: <top> <right && left> <bottom>
padding: 10px 30px 10px;

En pixeles 10 arriba y abajo y 20 derecha e izquierda

padding: <top && bottom> <right && left>
padding: 10px 20px;

En pixeles: 10 en todos lados.

padding: <top && bottom right && left>
padding: 10px;

Daniel Ricardo Suárez Echeverría

Hace 6 años

Siempre es bueno recordarlo! gracias!

Rolando Mamani Salas

Hace 5 años

muchas gracias !

Federico Gaston Blanco Ortiz

Hace 5 años

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

html {
    font-size:62.5%;
}

.main-container{
    margin:auto;
    height:400px;
    width: 700px;
    border-radius: 10px;
    background-color: brown;
    position:relative;
    top:100px;
}

.main-container img{
    width:60%;
    height:60%;
    position:relative;
    bottom:100px;
    left:125px;
}

.main-container__contenedor img{
    height:300px;
    width: 300px;
    position:relative;
    bottom: 140px;
    left:200px;

}

Que les parece? 😀😀😀

Arturo Castañeda

Hace 5 años

Reto en Desktop.

Y también lo logre hacer responsive.

Emma Yendis

Hace 5 años

¿Probaste con horizontal...? El mío se ajustaba a todos los dispositivos móviles en vertical, pero si lo girabas, en algunos se perdía.

José M. Veintimilla

Hace 5 años

Es muy curioso porque casi siempre adaptamos para móvil vertical, pero no horizontal.

Carlos Ramos

Hace 4 años

Clase 38 - Display

¿Para qué nos sirve la propiedad display?

Esta propiedad nos permite manipular el comportamiento de un elemento respecto al contenido que esté tenga dentro.

¿Cuáles son los valores más conocidos de la propiedad display?

Block.
Inline.
Inline-block.

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

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

¿Qué display tienen los elementos <li>?

List-item.

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

Yair Lira

Hace 6 años

/ * Valores <display-outside> * /

display: block:; display: inline; display: run-in;

/ * Valores <display-inside> * / display: flow; display: flow-root; display: table; display: flex; display: grid; display: ruby; display: subgrid;

/ * Valores <display-outside> más valores <display-inside> * / display: block flow; display: inline table; display: flex run-in;

/ * Valores <display-listitem> * / display: list-item; display: list-item block; display: list-item inline; display: list-item flow; display: list-item flow-root; display: list-item block flow; display: list-item block flow-root; display: flow list-item block;

/ * Valores <display-internal> * / display: table-row-group; display: table-header-group; display: table-footer-group; display: table-row; display: table-cell; display: table-column-group; display: table-column; display: table-caption; display: ruby-base; display: ruby-text; display: ruby-base-container; display: ruby-text-container;

/ * Valores <display-box> * / display: contents; display: none;

/ * Valores <display-legacy> * / display: inline-block; display: inline-table; display: inline-flex; display: inline-grid;

/ * Valores globales * / display: heredar; display: initial; display: unset;

Daniel Vergel

Hace 6 años

fantastico

Rolando Mamani Salas

Hace 5 años

muchas gracias !

Harold Andrés Burbano Acuña

Hace 6 años

Aporte :

Yair Lira

Hace 6 años

cómo evitar confundirse en usar display block y inline-block con encerrar en divs y usar las funciones position? Que ventajas me da usar display a parte de ahorrar líneas en código?

Mauricio Galvez

Hace 6 años

Son formas diferentes de hacer lo mismo. Cual es mejor dependerá de ti y del problema al que te enfrentes. No hay una respuesta definitiva a esa pregunta.

Patricio Manuel Ugarte

Hace 6 años

A nivel visual ninguno, pero a la hora de renderizar es un componente mas y tener muchos divs puede generar muchos dolores de cabeza al agregar y/o modificar estilos, por los temas de herencia o referencias. Llenar todo con divs es habitual, pero es muy mala práctica y conviene evitarla.

Gabriela Ramírez

Hace 5 años

Mi Aporte ;)

Recursos

¿Qué es el display en CSS?

El concepto de display en CSS es fundamental para entender cómo se renderizan los elementos HTML en un navegador. El display determina cómo se muestra un elemento y cómo interactúa con otros en la página. Las propiedades más comunes de display son block, inline, y inline-block.

¿Cómo funciona display block?

El display block es uno de los valores de display más utilizados. Cuando un elemento tiene display block, este ocupa todo el ancho disponible, sin importar el contenido que tenga dentro.

Características de display block:
- Ocupa el 100% del espacio horizontal disponible.
- Siempre comienza en una nueva línea.
- Se pueden aplicar propiedades de margin, padding, width, y height.

Ejemplo:

<div class="block-element">Esta es una etiqueta div</div>
<p class="block-element">Esta es una etiqueta de párrafo</p>

<style>
.block-element {
    background: green;
    margin: 10px;
    padding: 20px;
}
</style>

En el ejemplo anterior, tanto el div como el p se comportan como elementos block, ocupando todo el ancho del contenedor padre.

¿Qué es display inline?

El display inline es el valor predeterminado para muchos elementos de texto, como span o a. A diferencia de los elementos que usan display block, los elementos inline solo ocupan el espacio que requiere su contenido.

Características de display inline:
- No comienzan en una nueva línea.
- Ocupan solo el espacio necesario para el contenido.
- No se pueden aplicar width ni height.
- Solo se pueden aplicar margin y padding en los lados izquierdo y derecho, no arriba ni abajo.

Ejemplo:

<span>Esta es una etiqueta span</span>
<span>Otro span seguido</span>

Estos elementos se mostrarán uno al lado del otro ya que solo ocupan el espacio correspondiente a su contenido.

¿Cómo se utiliza display inline-block?

El display inline-block es una combinación poderosa de los modelos block e inline. Permite que los elementos se alineen al mismo tiempo que se aplican las características de los elementos block.

Características del display inline-block:
- Se comporta como un elemento inline.
- Permite aplicar margin, padding, width, y height.
- Permite que otros elementos se posiciones en línea horizontalmente si hay espacio suficiente.

Ejemplo:

<ul class="nav">
    <li>Home</li>
    <li>Cursos</li>
    <li>Instructores</li>
    <li>Blog</li>
</ul>

<style>
.nav li {
    display: inline-block;
    margin: 10px;
    padding-left: 20px;
    padding-right: 20px;
}
</style>

En este ejemplo, los elementos li de la lista se muestran en línea horizontal, similar a las pestañas de navegación, y se utilizan las propiedades de margin y padding para el espacio.

Consejos y recomendaciones prácticas

Formato adecuado del lay-out: Elige el modelo de display adecuado según el resultado visual que busques. Considere block para estructuras completas y inline para elementos en línea de texto.
Mezcla propiedades con inline-block: Aprovecha las ventajas de inline-block para ganar flexibilidad con las propiedades de tamaño y alineación.
Modelo de caja en acción: Familiarízate con el modelo de caja de CSS para manejar margin y padding con eficiencia. Esto te ayudará enormemente a diseñar elementos que se comporten y se alineen de manera correcta.
Experimenta en tu navegador: Utiliza herramientas de desarrollo en el navegador para ver en tiempo real cómo los cambios en las configuraciones de display afectan a los elementos de tu página.

El manejo de display es clave para entender cómo se estructura el contenido en CSS. Su dominio te permite crear diseños más efectivos y atractivos. Sigue experimentando y no dudes en consultar la documentación oficial de CSS para profundizar más. ¡Sigue aprendiendo y mejorando tus habilidades!

Web Developer Fundamentals

Este curso tiene una versión actualizada.

HTML y CSS: Fundamentos para Desarrolladores Web

Fundamentos del Desarrollo Frontend: Tecnologías y Prácticas Esenciales

Fundamentos del Desarrollo Backend

Comprende el Rol y las Habilidades de un Desarrollador Full Stack

Diferencias entre Páginas Web Estáticas y Dinámicas

HTML

Anatomía de una Página Web: Estructura y Elementos HTML

Creación y Estructura de un Archivo index.html Básico

Etiquetas HTML: Contenedoras y de Contenido

Listas anidadas y enlaces en HTML para recetas

Anatomía de Etiquetas HTML: Apertura, Cierre y Atributos

Etiquetas multimedia

Formatos de Imágenes y su Uso en Desarrollo Web

Optimización de Imágenes para Web

Uso de etiquetas IMG y FIGURE en HTML

Uso de las etiquetas HTML figure y figcaption para imágenes

Uso de la etiqueta de vídeo en HTML y sus atributos clave

Formularios

Creación de Formularios Web Efectivos con HTML

Creación de Formularios HTML con Campos de Fecha y Hora

Autocompletado y Requerimiento en Formularios HTML

Creación de Menús Desplegables con Select y Data List en HTML

Diferencias entre botones submit e input en formularios HTML

CSS

Introducción a CSS: Estilos y Aplicaciones Básicas

Implementación Básica de CSS en HTML

Pseudo Clases y Pseudo Elementos en CSS

Anatomía de una Regla CSS: Selectores y Declaraciones

Modelo de Caja en CSS: Margen, Relleno y Bordes

Herencia en CSS: Cómo Funciona y Afecta a los Estilos

Especificidad y Orden de Declaración en CSS

Especificidad y Orden en CSS: Crear y Aplicar Estilos Correctamente

Buenas prácticas en CSS: Especificidad y uso adecuado de selectores

Combinadores CSS: Hermanos Adyacentes y Especificidad

Selectores de Hermano General en CSS: Uso y Ejemplos Prácticos

Combinadores CSS: Hijos y Descendientes

Medidas Absolutas y Relativas en CSS: Píxeles y Porcentajes

Comprensión del uso de em en CSS: medidas relativas de fuente

Uso de REM en CSS para Fuentes y Dimensiones

"Uso de Viewport y Dimensiones en CSS: min-width, max-width, min-height"

Posicionamiento en CSS: Static, Absolute y Relative

CSS: Display Block, Inline e Inline-Block

Posicionamiento de Layout Básico en CSS

Posicionamiento y Estilos con Display Flex en CSS

Posicionamiento Vertical con Flexbox en CSS

Uso de Variables Custom en CSS para Optimizar Estilos

Fuentes y Web Fonts en CSS: Cómo Seleccionarlas y Aplicarlas

Responsive Design

Responsive Design: Estrategias Mobile First

Patrones de Diseño Responsive: Mobile First a Desktop

Media Queries para Diseño Responsive Mobile y Tablet

Patrón Layout Shifter en Diseño Mobile First

Patrón de Diseño Responsive: Column Drop en CSS

Diseño Responsive: Estrategias y Ejemplos Prácticos

Imágenes Responsive: Uso de la Etiqueta Picture y Buenas Prácticas

Accesibilidad

Accesibilidad Web: HTML Semántico para Proyectos Inclusivos

Uso de medidas relativas para accesibilidad en texto web

Atributos HTML para Mejorar la Accesibilidad Web

Próximos pasos

Próximos Pasos en Desarrollo Web: Mobile First y Más

Recursos Visuales para Desarrolladores Web

CSS: Display Block, Inline e Inline-Block