04. HTML, Elementos de bloque y línea¿Qué son los elementos de bloque y los de línea?

En HTML hay dos tipos de elementos básicos. Son los elementos de bloque y los elementos de línea. Cada uno de ellos tienen unas características especiales que os detallaré a continuación.

Los elementos de bloque son todos aquellos que al implementarlos en la página ocupan el 100% del espacio disponible horizontal. Tienen la característica de dejar una salto de línea. Es decir, si su contenido no ocupa el 100% del ancho de la pantalla, el siguiente elemento se situará debajo en una nueva línea.

En cambió, los elementos en línea, cuando los posicionamos en la página, sólo ocupan el espacio necesario horizontalmente. Cuando colocamos dos o más elementos en línea seguidos, se colocan uno al lado de otro, siempre que la suma de todos ellos no llegue hasta al final de la línea.

Esta propiedad de los elementos de HTML se puede cambiar en cualquier momento. Según el diseño que queramos para nuestra página, podemos cambiar su propiedad con CSS.

A continuación os expongo los elementos básicos y su comportamiento por defecto.

Elementos de bloque por defecto

• <h1> ... <h6> Encabezado
• <blockquote> Citas largas
• <pre> Texto predefinido
• <table> Tabla
• <tr> Insertar fila tabla
• <td> Insertar una celda tabla
• <th> Encabezado tabla
• <form> Formulario
• <textarea> Insertar varias líneas en formulario
• <select> Elemento formulario lista de opciones
• <option> Elemento <select> del formulario
• <ul> <ol> <dl> <li> <dt> <dd> Tipos de lista y elementos

Elementos de línea por defecto

• <q> Citas cortas
• <em> Cursiva
• <strong> Énfasis o negrita
• <cite> Marca cita
• <img> Imagen (inline-block)
• <a> Enlace
• <input> Entrada formulario
• <label> Etiqueta <input> formulario

Una de las características relevantes y que te ahorrara perdidas de tiempo innecesario, es que los elementos en línea no tienen ni margen superior ni inferior. Tampoco obedecen al ancho ni al alto indicado por CSS. Así que antes de querer aplicar estás propiedades deberías cambiar su propiedad por defecto. Ya lo veremos a su debido tiempo, pero para dar una idea es cambiar su propiedad CSS a display: inline-block.