Hoy vamos a ver cómo HTML clasifica los elementos en dos grupos, inline (en línea) y block (en bloque),
cuestión fundamental para saber cómo van a actuar entre sí los elementos cuando colocamos unos al lado de otros. El conocer bien este tema nos evitará muchos dolores de cabeza cuando estemos maquetando una página.
Las cajas
El primer concepto que hay que tener claro, es que los navegadores interpretan los diferentes elementos HTML (párrafos, títulos, imágenes, etc.) como si fuesen cajas. Estas “cajas” van a tener unas dimensiones y se van a colocar unas a continuación de otras.
Los elementos tienen varias propiedades que constituyen las características de las cajas, como por ejemplo la altura y la anchura, los márgenes, los bordes, etc., pero eso lo veremos un poco más adelante. Ahora centrémonos en los elementos en línea y en bloque.
La diferencia entre elementos Inline y Block radica en el espacio que van a ocupar sus “cajas” en la página.
Elementos en línea
Los elementos en línea (inline) comienzan donde acaba el elemento anterior y tan solo toman el ancho que necesitan para mostrar su contenido, se van colocando en la misma línea de izquierda a derecha y cuando no queda más espacio continúan en la línea de abajo.
Veamos un ejemplo en el que vamos a aplicar un estilo CSS para que aparezca un borde alrededor del elemento.
<html>
<head>
<style>
a {border: solid 2px orange}
</style>
</head>
<body>
<a>Este es un elemento Inline</a>
<a>Este es otro elemento Inline</a>
<a>Y éste también es Inline</a>
</body>
</html>
Si visualizamos el ejemplo en el navegador, con la ayuda de los bordes que hemos añadido, podemos ver cómo los elementos solo ocupan los espacios que necesitan sus contenidos, de manera que se colocan unos al lado de los otros.
Lista de elementos Inline
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <q> <samp> <script> <select> <small> <span> < strong> <sub> <sup> <textarea> <time> <tt> <var>
Elementos en bloque
En el caso de los elementos en bloque (block), siempre comienzan en una nueva línea y ocupan todo el ancho de esa línea, situándose uno debajo de otro.
Vamos con un ejemplo práctico.
<html>
<head>
<style>
p {border: solid 2px orange}
</style>
</head>
<body>
<p>Este es un elemento Block</p>
<p>Y éste es otro elemento Block</p>
</body>
</html>
Si vemos el resultado del ejemplo en un navegador, podemos comprobar cómo independientemente de lo que ocupa el párrafo, la “caja” de dicho elemento, se extiende a lo ancho de toda la línea, haciendo que el siguiente párrafo comience en una nueva línea.
NOTA:
Dentro de un elemento block puede haber tanto un elemento inline como otro elemento block, pero dentro de un elemento inline sólo puede haber otro elemento inline.
Lista de elementos Block
<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1> – <h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <output> <p> <pre> <section> <table> <tfoot> <ul> <video>
Como ya hemos comentado, este es un tema muy importante para poder controlar correctamente la disposición de los elementos en las páginas. En capítulos posteriores veremos cómo la propiedad CSS “display” nos permite modificar el comportamiento inline o block que por defecto tiene un elemento.
Dejar una opinión