¿Qué tipo de etiqueta es? ¿Block, inline, o inlineblock?

¿Qué tipo de etiqueta es? ¿Block, inline, o inlineblock?

Podemos dividir las etiquetas en 3 grandes bloques.

Las que se comportan como un div o un párrafo son etiquetas de tipo block. Se caracterizan por tener padding, border, margin, width y height. Fuerzan un salto de línea entre bloque y bloque.

Las que se comportan como un span o un enlace son etiquetas de tipo inline. Tienen padding, border y margin-left y margin-right. No tienen width, ni height ni margin-top ni margin-bottom. Se sitúan una al lado de la otra.

Las imágenes cogen lo mejor de las etiquetas de tipo block y de las etiquetas inline para hacer un híbrido inline-block. De las etiquetas inline cogen la propiedad de apilarse las unas al lado de las otras. De las etiquetas block cogen la posibilidad de tener de todo: padding, border, margin, width y height

En base a este resumen vamos a practicar en este ejercicio un concepto imprescindible.

¿Como averiguar para cada caso si estamos ante una etiqueta block, inline o inline-block?

Esta entrada puede que te ayude a aclarar conceptos.

Repasémoslo mediante un ejercicio.

Enunciado

Averigua si las siguientes etiquetas son etiquetas de tipo block, inline o inline-block.


<u>soy un u</u>
<strong>soy un strong</strong>
<blockquote>soy un blockquote</blockquote>
<header>soy un header</header>
<main>soy un main</main>
<i>soy i</i>
<footer>soy un footer</footer>
<li>soy un li</li>
<ul>soy un ul</ul>

Para ello puedes escribir los estilos css que consideres.

Solución del ejercicio

Para averiguar si una etiqueta es de tipo block, inline o inline-block escribiremos una hoja de estilos que fuerce para cada una de las etiquetas un ancho y un width.

En caso de no tener las propiedades width y height significará que son de tipo inline.

Para diferenciar entre block y inline-block nos fijaremos si las etiquetas se apilan o no.

En un documento web se han escrito las etiquetas anteriores en el html y en el css se han aplicado los siguientes estilos.

u,strong,blockquote,header,main,i,footer,li,ul{
	width:200px;
	height:32px;
	border:1px solid red;
}

Obteniendo el siguiente resultado:

resultado tras aplicar estilos
resultado tras aplicar estilos

De lo que se desprende:

etiquetas en línea:

u, strong, i

etiquetas bloque:

blockquote, header, main, footer, li, ul

No hay ninguna etiqueta inline-block.

¡Hola!

Querido lector,

Existen tablas del w3c que indican la familia de la que forma parte cada etiqueta.

Sin embargo pienso que es más práctico saberlo deducir cuando se tengan dudas.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media / 5. Votos:

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.