Elementos de línea y de bloque

Todas las etiquetas del lenguaje HTML se representan en el navegador dentro de una caja invisible, según las características de esa caja, las etiquetas se clasifican en etiquetas de línea o de bloque

Una etiqueta de línea es aquella que ocupa el espacio mínimo necesario en horizontal, y permite que otro elemento se coloque a su lado. En cambio una etiqueta de bloque, ocupa todo el ancho disponible y no permite que otro elemento se coloque a su lado (aunque aparentemente tenga lugar suficiente).

Etiquetas de línea (las más usadas):

 <a>, <span>, <strong>, <img>, <input>, <code>

Etiquetas de bloque (las más usadas):

<h1>, <h2>, <h3>, <p>, <ul>, <li>, <div>, <header>, <nav>, <section>, <article>, <footer>, <form>, <table>

Ejemplo:

Etiquetas de línea y de bloque

En el ejemplo de arriba los tres enlaces están escritos en etiquetas <a></a>, que como son de línea se colocan uno al lado del otro, porque tienen lugar.

En cambio los párrafos, escritos en etiquetas <p></p> aunque sean cortos y tengan lugar al costado, se colocan uno debajo del otro.

Otra diferencia es que a las etiquetas de línea -por defecto- no se le puede definir un ancho y alto, ni padding o margin, porque el navegador no lo muestra (salvo el padding pero de manera incompleta). En cambio en las etiquetas de bloque sí podemos definir esas propiedades. Este comportamiento por defecto podemos modificarlo utilizando la propiedad display.

Es imprescindible reconocer esta clasificación para entender el comportamiento por defecto de los elementos HTML y controlarlos con las propiedades CSS adecuadas.

Carrito de compra
USD Dólar de los Estados Unidos (US)