Propiedad Display: Block, Inline e Inline-Block

Los elementos HTML se comportan de manera diferente según sean block, inline o inline-block. Estos tipos de visualización afectan el diseño, el espaciado y las propiedades CSS que se pueden utilizar.

Elementos de bloque

• Comienzan en una nueva línea;
• Ocupan todo el ancho de su contenedor;
• Admiten width, height, margin, padding y border.

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

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

Elementos en línea-bloque

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

Diferencias clave