Comprensió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.css
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.css
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.css
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?
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
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?
Genial!
Completion tasa mejorada a 2.56
Comprensió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.css
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.css
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.css
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?
¡Gracias por tus comentarios!