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:

Introducción al CSS. Que significa Cascading Style Sheets.
- 58
Se explica que es el CSS, que significa en realidad el acrónimo y porqué se le llama así y hacemos una primera toma de contacto con este lenguaje web.
Unidades de medida absolutas y relativas en CSS
- 46
¿Como se define el tamaño de cada uno de los elementos de una página web? En CSS podemos encontrar medidas absolutas y relativas. Veamos a que equivale cada una.
Selectores CSS. Que son y como usarlos
- 72
Guía sobre los principales selectores css que existen para llamar a las etiquetas de un documento web.
Resumen de como comentar código en html, css y javascript
- 92
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
Sintaxis CSS básica. Cómo se escribe el CSS.
- 52
Escribir CSS es fácil. Es un lenguaje que no tiene sorpresas. En esta entrada se explica como se escribe una instrucción CSS.
Ejemplo de centrado horizontal de una caja con CSS
- 28
Ejemplo de como centrar horizontalmente una caja o contenedor en una página web y mediante CSS.
Como mezclar CSS y HTML. Acoplamiento CSS
- 45
Existen 3 mecanismos para mezclar html y css. Veamos como se hace.
Colores CSS para web
- 45
Existen distintas formas de indicar los colores que queremos dar a los elementos de un documento. Básicamente necesitamos dominar los colores RGB, RGBa y Hexadecimal. Se muestran varios ejemplos de us...
Dimensiones reales de una caja en CSS
- 25
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.
Tipografía CSS: como usar web safe fonts y tipografías personalizadas.
- 44
La sal es a la cocina lo que las tipografías son al mundo web. Debemos conocerlas y usarlas con conocimiento. En esta entrada se explica que CSS se debe escribir para hacerlo posible.
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.