G. Propiedades para tamaños

width

Ancho de un elemento. Se indica usando un número decimal, opcionalmente fraccionario, seguido de la unidad.

Solo aplica para para los elementos con display block o inline-block.

Ejemplo:

width: 100%

height

Altura de un elemento. Se indica usando un número decimal, opcionalmente fraccionario, seguido de la unidad.

Solo aplica para para los elementos con display block o inline-block.

Ejemplo:

height: 3em

box-sizing

Indica como calcular el tamaño de un componente. Aplica para las propiedades width y height.

Los valores que puede tomar esta propiedad son:

content-box: El tamaño es solo el tamaño del contenido. Cuando en se especifica esta propiedad para un elemento, este es el valor que se utiliza (valor por omisión).
border-box: El tamaño incluye el tamaño del contenido, más el espacio ocupado por los bordes y el relleno.

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	initial-scale=1.0">
8	<title>box-sizing</title>
9	<style>
10	main {
11	width: 50%;
12	height: 15rem;
13	background-color: orange;
14	padding-top: 1rem;
15	padding-bottom: 1rem;
16	}
17
18	h1 {
19	width: 100%;
20	background-color: lightgreen;
21	margin: 0;
22	font-size: 1rem;
23	padding: 1em;
24	border: thick solid green;
25	}
26
27	nav {
28	box-sizing: content-box;
29	width: 100%;
30	background-color: pink;
31	padding: 1em;
32	border: thick solid red;
33	}
34
35	p {
36	box-sizing: content-box;
37	width: 100%;
38	background-color: violet;
39	margin: 0;
40	}
41
42	div {
43	box-sizing: border-box;
44	width: 100%;
45	background-color: lightblue;
46	padding: 1em;
47	border: thick solid blue;
48	}
49	</style>
50	</head>
51	<body>
52	<main>
53	<h1>por omisión</h1>
54	<nav>content-box</nav>
55	<p>content-box 2</div>
56	<div>border-box</div>
57	</main>
58	</body>
59	</html>