inline-block

Display: inline-block
Curso básico de Maquetación Web

display: inline-block

display: inline-block. – Comenzamos este capitulo dedicado a la maquetacion web con la propiedad css, display: inline-block, como dice el estándar de la w3c, crea cajas que son de bloque y en línea de forma simultánea. Una caja de tipo inline-block se comporta como si fuera de bloque, pero respecto a los elementos que la rodean, es una caja en línea.

Esta combinación de propiedades, hace que su uso sea ideal para la maquetacion web, su funcionamiento es bastante aceptable pero con sus peculiaridades como veremos a continuación.

Partimos del mismo ejemplo anterior en el que tenemos 4 imágenes encerradas en 4 ‘div’, que a su vez están dentro de un div de clase ‘galeria’ así:

Vamos a darle un poco de css para que podamos apreciar mejor los detalles así:

Simplemente hemos dado un border a los divs, para ver mas claramente su comportamiento, un fondo oscuro al body por lo mismo, y el box-sizing para evitar que los bordes o el padding alteren la maquetacion con display: inline-block.

Su salida sería esta:

Captura inline

Vemos el comportamiento esperado, un div debajo de otro por la propiedad display block que tienen todos los divs. Comenzamos a alterar este comportamiento por defecto para maquetarlo a nuestro gusto.

Añadimos la propiedad display: inline-block, a los elementos que queremos posicionar en linea, en este caso los cuatro divs de clase ‘fotos’. vemos su comportamiento:

display: inline-block

La primera impresión es que ha funcionado ya que los elementos se han posicionado ‘en linea’, que era lo deseado y el último como no entra pues se pone en la linea de abajo.

Si observamos con mas atención, vemos que sin embargo hay un error, si el tamaño de los divs es un 25%, y no hay ni margin ni padding que pueda aumentar el tamaño de los divs, además de usar la propiedad box-sizing: border-box que evita el aumento de los divs con padding o border, entonces ¿porque no entran todos los divs en una misma linea?, deberían ¿no?

La respuesta viene dada por la misma propiedad display: inline-block. Esta propiedad añade estilos de texto, por asi decirlo, a los elementos a los que se les da esta propiedad.

Esta propiedad crea al parecido al espacio entre caracteres que se produce cuando escribimos texto, si nos fijamos con atención en la imagen anterior vemos que hay un espacio entre cada div. La solución es fácil simplemente tenemos que decirle al padre que todos sus elemento tengan un font-size de 0 pixeles eliminando este ‘espacio entre caracteres’, que ha creado display: inline-block.

Este sería el código:

Esta la salida en el navegador

 display inline-block corregido

Vemos que el resultado es el esperado, pero ademas, tenemos otro comportamiento interesante de analizar, para ello vamos a añadir un poco de texto debajo de cada foto

Este el CSS

Asi la salida web:

vertical align

Hemos añadido un background blanco para que se vea mejor. Observamos una nueva característica de la propiedad display: inline-block, y es que alinea los elementos a los que se les da la propiedad por defecto al ‘bottom’ del padre.

Esto lo corregimos con la propiedad vertical-align, con la que tenemos la posibilidad de alinear abajo (bottom), centrada (center), arriba (top), con lo cual volvemos a conseguir el resultado deseado así:

vertical align top

Lo ultimo que vamos a destacar es que al quitar el font-size al padre (‘galeria’), todos los elementos de texto que están dentro de el como son las nuevas ‘p’, que hemos colocado para el ejemplo, no se verán ya que su tamaño de fuente será 0 y por tanto no se verán.

Para corregir esto, decimos que todos los elementos que estén dentro de ‘.fotos’, van a tener un font-size de 12px, que para que nuestro ejemplo funcione, no tenemos que especificar mas, así:

Pues bien esta es la base de la maquetacion web con display: inline-block, una manera de maquetar que esta bastante bien, aunque queda ya obsoleta con la aparición de los modelos de cajas flexibles como veremos en el próximo capitulo.

Capítulos del curso

Maquetación Web

1 julio, 2018
Flexbox

Flexbox
Curso básico de Maquetación Web

Flexbox. - Capitulo 5 del Curso básico de Maquetación Web, en el que veremos las propiedades del modelo de cajas Flexbox ☎ 689 89 42 67
1 julio, 2018
Display: flex

Display: flex
Curso básico de Maquetación Web

Display: flex. - Capitulo 4 del Curso básico de Maquetación Web, en el que veremos en profundidad el modelo de cajas flexibles Flexbox ☎ 689 89 42 67
11 junio, 2018
float maquetar

Float
Curso básico de Maquetación Web

Float. - Capitulo 3 del Curso básico de Maquetación Web, La Maquetación web con float, con sus pros y contras. Pasemos a verlo en profundidad ☎ 689 89 42 67
18 abril, 2018
inline-block

Display: inline-block
Curso básico de Maquetación Web

Segundo capítulo del Curso básico de Maquetación Web, dedicado a la Maquetación web con display: inline-block, un método tradicional de maquetar que vamos a intentar tratarlo en profundidad
11 abril, 2018
curso basico de maquetacion web

Maquetación Web
Introducción a la maquetación web

Comenzamos este Curso básico de Maquetación Web, en el que veremos paso a paso desde cero que es la Maquetación Web, repasaremos conceptos generales de CSS, veremos el pasado, presente y futuro de la Maquetación Web

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *