F. El valor `block`

Contiene elementos de cualquir tipo de despliegue.
De forma predeterminada, los elementos de agrupamiento como p, header footer o div tienen este tipo de despliegue, pero se puede cambiar.
Si contiene solo elementos de despliegue inline, inline-block y texto, estos se despliegan de forma horizontal uno tras otro, iniciando en la parte superior del elemento. Si llega al final de un renglón, continuá al inicio del siguiente.
Si contiene solo elementos de despliegue block, estos se despliegan de forma vertical uno tras otro, utilizando todo el ancho permitido por el elemento que los contiene.
Si contiene mezclados elementos inline, inline-block, texto y block, los inline, inline-block y textos consecutivos se agrupan en una caja de tipo block imaginaria y se aplica el despliegue cuando todos los elementos son de tipo block.

Ejemplo


1	<!DOCTYPE html>
2	<html lang="es">
3	<head>
4	<meta charset="UTF-8">
5	<meta name="viewport"
6	content="width=device-width">
7	<title>block</title>
8	<style>
9	div {
10	background-color: yellow;
11	}
12	</style>
13	</head>
14	<body>
15	<h1>block</h1>
16	<p>
17	En este ejemplo, body solo
18	tiene elementos de bloque.
19	</p>
20	<p>
21	Este párrafo solo tiene contenido
22	inline e inline-block.
23	<em>Un énfasis inline.</em>
24	<button>
25	Un botón inline-block,
26	inline-block, inline-block
27	</button>
28	<span>
29	Un span inline, inline, inline,
30	inline.
31	</span>
32	</p>
33	<div>
34	Este div tiene contenido
35	mezclado.
36	<em>
37	Este es un énfasis inline.
38	</em>
39	<strong>
40	Este es un strong inline.
41	</strong>
42	<button>
43	Este es un botón inline-block
44	</button>
45	<p>
46	Este párrafo solo contiene
47	inline e inline-block.
48	<em>Un énfasis inline.</em>
49	<button>
50	Un botón inline-block
51	</button>
52	<span>Un span inline.</span>
53	</p>
54	</div>
55	</body>
56	</html>