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

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

Print Friendly, PDF & Email
Elementos en línea. Elementos bloque. Elementos inline-block.
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!

Entradas relacionadas:

Dimensiones reales de una caja en CSS
- 247
Las dimensiones reales de una caja, por defecto, no son las que indica el width. Veamos como se calculan y en que nos puede ayudar aprenderlo.
Ejercicio sobre la propiedad clear:both (float)
- 40
Ejercicio para practicar de una forma muy visual el uso de la propiedad clear:both | left | right; de css cuando se apilan cajas mediante la propiedad float. Incluye solución.
Mi chuleta de instrucciones CSS para dar formato al texto
- 75
Existen muchas instrucciones para dar formato al texto. Es difícil recordarlas todas. Se resumen principales instrucciones css para dar formato a letras, palabras y párrafos.
Genera una escala cromática con css
- 35
En este ejercicio css se practica la creación de una paleta de colores mediante rgba. Además, se practican otros conceptos importantes como el selector de atributo. Incluye solución.
La propiedad z-index
- 110
Resumen y ejemplo de aplicación de la propiedad Z-index. Asignatura CSS curso confección y publicación de páginas web.
Creación de un menú horizontal con sub menú desplegable mediante CSS
- 615
Código CSS explicado paso a paso para crear un menú horizontal con un sub menú vertical. Apuntes de alumno IFCD0110 tutorial CSS.
Escribe los selectores css adecuados en cada caso
- 44
Ejercicio css del curso web ifcd0110 para practicar con los selectores más adecuados a poner en un fragmento de html. Incluye solución.
Significado de las propiedades top, bottom, left, right de css
- 1292
Para cada propiedad se muestra un ejemplo visual del efecto de un valor positivo o negativo de top, right, bottom y left.
La propiedad overflow
- 203
Resumen de uso de la propiedad de overflow de CSS. Apuntes de teoría del curso IFCD0110 del curso confección y publicación de páginas web.
¡Veo, veo! Suplantando etiquetas html con css. Ejercicio de repaso.
- 44
Ejercicio de repaso de instrucciones básicas de css. Estiliza etiquetas para que parezcan etiquetas que en realidad no son. Incluye solución.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.