Elementos en línea (inline)

Al contrario de los elementos en bloque, los elementos en línea no comienzan una nueva línea, ni la prolongan hasta el final, su "marco" perfila sólo el espacio que ocupe su contenido.

Veamos un ejemplo:

 

 

 

 

Hemos añadido un borde punteado en rojo a la etiqueta <b> para ver su comportamiento.

Vemos que el elemento en línea se escribe "por donde viene" y se termina donde acaba su contenido.

 

Podemos deducir de esto, que a un elemento de línea no podemos darle un alto.

Eso dependerá de su contenido. Si ponemos el tamaño de letra más grande a la etiqueta <b>:

 

 

notepad

 

 

Os dejo el código actual de este diseño:

 

 

notepad

 

 

Vemos que en una línea le he dado un ancho de borde (2px), estilo (dotted) y color (red).

 

 

notepad

 

 

Por último tener en cuenta que...

 

  • Un elemento en línea puede ir dentro de otro elemento en línea.

 

  • Un elemento en línea puede ir dentro de un elemento en bloque.

 

  • Un elemento en bloque puede ir dentro de otro elemento en bloque.

 

  • Un elemento en bloque NO puede ir dentro de un elemento en línea.

 

Éstos son los elementos en línea de HTML: a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var.


 

Contenidos que te pueden interesar
Este sitio usa cookies para personalizar el contenido y los anuncios, ofrecer funciones de redes sociales y analizar el tráfico. Ninguna cookie será instalada a menos que se desplace exprésamente más de 400px. Leer nuestra Política de Privacidad y Política de Cookies. Las acepto | No quiero aprender cursos gratis. Sácame