Ejemplo Elementos en bloque y elementos en línea

Elementos en Bloque

Un elemento en bloque por default adopta el ancho de su contenedor y el alto de su contenido (a menos que estos valores sean explicitamente definidos en el CSS).

div.bloque Soy un elemento en bloque.
div.bloque.ancho-definido Soy un elemento en bloque con un ancho definido en CSS. Su ancho está definido al 50% de su contenedor.
div.bloque Soy un elemento en bloque pero con mucho más contenido. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
div.bloque Soy un elemento en bloque.
div.bloque-interno Soy un elemento en bloque.
div.bloque-interno Soy un elemento en bloque.
div.bloque-interno Soy un elemento en bloque.
div.bloque-super-interno Soy un elemento en bloque.

Elementos en Línea

Los elementos en línea son aquellos que se organiza uno al lado del otro hasta ocupar el espacio disponible de su contenedor. Estos adquieren su ancho de su contenido.

Links

Soy un link Soy un link Soy un link Soy un link Soy un link Soy un link Soy un link Soy un link

Imágenes