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
Genial!
Completion tasa mejorada a 2.56Comprensió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!
