Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Comprensión de los Elementos Block, Inline e Inline-Block | El Modelo de Caja de CSS y Elementos de Espaciado
Fundamentos de CSS

bookComprensión de los Elementos Block, Inline e Inline-Block

Los elementos HTML se comportan de manera diferente según sean de bloque, en línea o en línea-bloque. Estos tipos de visualización afectan la disposición, el espaciado y las propiedades CSS que se pueden utilizar.

Elementos de bloque

  • Comienzan en una nueva línea;
  • Ocupan el ancho completo de su contenedor;
  • Admiten ancho, alto, margen, relleno y borde.

Ejemplos comunes: <div>, <p>, <ul>, <li>, <h1>–<h6>.

index.html

index.html

index.css

index.css

copy

Elementos en línea

  • Permanecen en la misma línea;
  • Ocupan solo el espacio necesario para su contenido;
  • No se les puede aplicar ancho ni alto (pero el borde sí funciona).

Ejemplos comunes: <a>, <span>, <img>, <input>.

index.html

index.html

index.css

index.css

copy

Elementos inline-block

  • Permanecen en línea, como el texto;
  • Admiten ancho, alto, margen, relleno y borde, como los elementos de bloque.

Ejemplos: <button>, <select>, <textarea>.

Son útiles cuando se necesita que los elementos estén uno al lado del otro, pero aún así permitir un control total del estilo.

index.html

index.html

index.css

index.css

copy

1. ¿Cuál es la principal diferencia entre los elementos de bloque y los elementos en línea?

2. ¿Cuál de los siguientes es un ejemplo de un elemento de bloque?

question mark

¿Cuál es la principal diferencia entre los elementos de bloque y los elementos en línea?

Select the correct answer

question mark

¿Cuál de los siguientes es un ejemplo de un elemento de bloque?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 3. Capítulo 7

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

Can you explain the main differences between block, inline, and inline-block elements?

Which HTML elements are typically block, inline, or inline-block?

Can you give examples of when to use each display type in a web page?

bookComprensión de los Elementos Block, Inline e Inline-Block

Desliza para mostrar el menú

Los elementos HTML se comportan de manera diferente según sean de bloque, en línea o en línea-bloque. Estos tipos de visualización afectan la disposición, el espaciado y las propiedades CSS que se pueden utilizar.

Elementos de bloque

  • Comienzan en una nueva línea;
  • Ocupan el ancho completo de su contenedor;
  • Admiten ancho, alto, margen, relleno y borde.

Ejemplos comunes: <div>, <p>, <ul>, <li>, <h1>–<h6>.

index.html

index.html

index.css

index.css

copy

Elementos en línea

  • Permanecen en la misma línea;
  • Ocupan solo el espacio necesario para su contenido;
  • No se les puede aplicar ancho ni alto (pero el borde sí funciona).

Ejemplos comunes: <a>, <span>, <img>, <input>.

index.html

index.html

index.css

index.css

copy

Elementos inline-block

  • Permanecen en línea, como el texto;
  • Admiten ancho, alto, margen, relleno y borde, como los elementos de bloque.

Ejemplos: <button>, <select>, <textarea>.

Son útiles cuando se necesita que los elementos estén uno al lado del otro, pero aún así permitir un control total del estilo.

index.html

index.html

index.css

index.css

copy

1. ¿Cuál es la principal diferencia entre los elementos de bloque y los elementos en línea?

2. ¿Cuál de los siguientes es un ejemplo de un elemento de bloque?

question mark

¿Cuál es la principal diferencia entre los elementos de bloque y los elementos en línea?

Select the correct answer

question mark

¿Cuál de los siguientes es un ejemplo de un elemento de bloque?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 3. Capítulo 7
some-alt