CSS

Tipos de display
Ejemplo guiado: La Bandera
1. Crea esto en la web

Laboratoria

es

TRANSFORMACIÓN

Altura: 100px
Recordemos...
Block In-line

Etiquetas que se comportan Etiquetas que se comportan

“block”: “in-line”:
<h1>, <p>, <ul>, <li>, <a>, <strong>, <em>,
<div> <img>, <span>
Ejemplo guiado: La Bandera
2. Ahora intenta que se vea así:

Laboratoria

es

TRANSFORMACIÓ
N

Tip:
Piensa en el margen y el ancho
 Ejemplo guiado: La Bandera
3. Ahora coloca display: inline-block

Laboratoria es TRANSFORMACIÓN
Ejemplo guiado: La Bandera
4. Ahora coloca display: inline

Laboratori es TRANSFORMACIÓN
a
Tipos de Display
Block In-line Inline-Block
Respeta Sí Sí Sí
márgenes izq-der
Respeta Sí No Sí
márgenes arriba-
abajo
Se le puede Sí No Sí
asignar ancho y
altura
Permite que No Sí Sí
otros elementos
se coloquen a su
lado
Ejercicio: 8 cajas
Ahora intenta hacer esto: