display block, inline, inline-block y float

A la hora de maquetar una página web, merece tener en cuenta las diferencias y lo que implican estos cuatro estilos.

Pasó mucho tiempo antes de que empezase a maquetar con algo que no fuese float:left. Si conoces las posibilidades del estilo display maquetarás mejor y más rápido.

Si quieres profundizar en el uso del display y aprender mucho más de maquetación, puedes hacer el curso de HTML y CSS de esta misma web.

Si has comprendido perfectamente los conceptos que explico en este videotutorial te propongo realizar este ejercicio, que pone a prueba lo aprendido.

¿Qué es esto del display y el float?

Los estilos display y float definien como se va a comportar un elemento con respecto a los que lo rodean. Cada uno de estos estilos define un comportamiento diferente que paso a explicar:

display:block

Los elementos con este estilo se van colocando verticalmente y respetan el width y el height (el ancho y el alto) que les hemos asignado. Este es el estilo por defecto de los divs.

Uso del estilo display:block

display:inline

Los elementos con este estilo se van apilando en horizontal y hacen caso omiso del width y el height que les indicamos. Tampoco procesan muy bien el padding asignado. Si te das cuenta, este estilo define un comportamiento que es exactamente el contrario del estilo anterior. Este es el estilo por defecto de las etiquetas a y span. Se utiliza fundamentalmente para contener texto.

display:inline-block

A medio camino entre el estilo display:block, y el estilo display:inline, está el estilo display:inline-block. Los elementos con este estilo se apilan en horizontal y SÍ respetan el width y el height que les hemos asignado. Este es el estilo por defecto de las imágenes.

float:left

Este estilo sirve para apilar elementos horizontalmente. Personalmente, en general prefiero el display:inline-block para colocar cosas en horizontal. El estilo float permite que las cosas se apilen horizontalmente desde la izquierda o desde la derecha (float:right), pero no desde el centro. Esto si lo permite el estilo display:inline-block

Bien, y esos son a grandes rasgos las diferencias. En el video completo esta información con unso cuantos detalles megaimportantes 🙂

Aviso Legal | Política de privacidad