Elementos en línea. Elementos bloque. Elementos inline-block.

Elementos en línea. Elementos bloque. Elementos inline-block.

Print Friendly, PDF & Email
Valora esta entrada

En una lectura anterior hemos descrito el modelo de cajas.

Hemos aprendido como se define el margen, el borde, el relleno y el ancho y la altura.

Nos queda pendiente ver como se relacionan estas cajas html entre ellas.

Si se apilan. Si se ponen una al lado de la otra. O si se superponen.

Veámoslo repasando los elementos bloque, elemento en línea, y elementos híbridos (en línea-bloque).

Resumen de contenidos de esta publicación

En este punto te será útil saber que absolutamente todas las cajas caben dentro de uno de los grupos listados.

En algunos casos es posible que encuentres que la asignación es lógica.

En otras tendrás que hacer un acto fe.

Por ejemplo porqué los enlaces son elementos en línea?

Ante la duda siempre puedes consultar este enlace y este otro (Fuente oficial Mozilla)

O de todos modos siempre puedes deducirlo como explicaremos al final de esta entrada.

La propiedad display puede tomar los valores

.nombreSelector{display:block;}
.nombreSelector{display:inline;}
.nombreSelector{display:inline-block;}
y los valores none, inherit e initial que veremos en otras publicaciones

Elementos en línea

Los elementos en línea son

a, span, label, strong, br, input, textarea, abbr, acronym, b, basefont, bdo, big, cite, code, dfn, em, font, i, kbd, q, s, samp, select, small, strike, sub, sup, u, u, var

Su principales características son:

  • son apilables. no tienen ni margin-top ni margin-bottom (por mucho que se lo indiques en el CSS). Si tienen margin-left y margin-right.
  • no respetan ni width ni height. Estas medidas dependerán del tamaño en píxels de su contenido.

La forma más fácil de saber si un elemento es en línea o no es darle ancho.

Si le das width:100% y ves que la caja no ocupa todo el ancho disponible entonces se trata de un elemento en línea.

Elementos bloque

Los elementos bloque son:

div, p, h1, h2, h3, h4, h5, h6, hr, ol, ul, table, li, address, blockquote, center, dir, dl, fieldset, formisindex, noframes, noscript, pre, dd, dt, frameset, tbody, td, tfoot, th, thead, tr

Sus principales características son:

  • Fuerzan un salto de línea (ocupan todo el ancho disponible)
  • Respetan el width, el height, el margin-top y el margin-bottom indicados por el usuario.

El mejor modo de ver si un elemento es en bloque o no es escribir varios seguidos y comprobar si se fuerza el salto de línea o no.

Si los elementos quedan uno al lado del otro entonces pueden ser de tipo inline-block o en línea.

Elementos inline-block

ejemplo inline-block
Ejemplo como conseguir amontonar 3 columnas mediante inline-block

Los elementos inline-block son las imágenes.

Una práctica común es convertir elementos bloque en elementos inline-block para maquetar un espacio de una web.

Por ejemplo dividir la página en 3 section o article y ponerlos uno al lado del otro.

Sería algo como:

section{display:inline-block;width:33%;}

fijaros en la imagen.

Hacemos uso de la propiedad border-box para asegurarnos que el ancho de las columnas se calcular siempre para ocupar el 33%.

También fijaros que para conseguir que la cajas estén perfectamente pegadas se usa font-size:0; en el selector universal y luego se corrige para cada etiqueta.

Para este ejemplo, en el css hemos usado elementos section que de todos modos ya son bloque (la instrucción display:block; no hacía falta).

Y hasta aquí una entrada extensa en la que hemos repasado 3 conceptos importantes imprescindibles para aprender a maquetar web correctament.

¡Si tenéis dudas podéis dejarlas en los comentarios!

Espero que os pueda ser de utilidad.

¡Hasta mañana!

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.