A. Longitudes en CSS

Hay algunas propiedades que expresan tamaños o distancias. Por ejemplo:

font-size

Indica el tamaño de letra.

Los valores son números decimales, que opcionalmente son fraccionales y son seguidos sin espacio por las unidades de medición. Ejemplos: 3em, 2.4rem.

El cero se puede expresar sin unidades; por ejemplo: 0.

Algunas unidades de medición son:

em

La altura de un renglón de texto, usando el tamaño de letra del elemento.

rem

La altura de un renglón de texto, usando el tamaño de letra del elemento raíz (que en HTML, es el elemento html).

vh

1% de la altura del puerto de visión (la ventana).

vw

1% del ancho del puerto de visión (la ventana).

%

Porcentaje del espacio que el elemento padre permite que sus hijos ocupen.

px

Pixeles.

Solo para los más rudos

La especificación técnica de llas logitudes de CSS está en https://drafts.csswg.org/css-values/#lengths

C. Margen (margin)

Se pueden especificar con las siguientes propiedades:

margin-top

Solo especifica el tamaño del margen en la parte superior de la caja.

Ejemplo:

margin-top: 3vh

margin-bottom

Solo especifica el tamaño del margen en la parte inferior de la caja.

Ejemplo:

margin-bottom: 50%

margin-left

Solo especifica el tamaño del margen en el lado izquierdo de la caja.

Ejemplo:

margin-left: 8px

margin-right

Solo especifica el tamaño del margen en el lado derecho de la caja.

Ejemplo:

margin-right: 3vw

margin: tamaño

Especifica el mismo tamaño de margen arriba, abajo, a la izquierda y a la derecha.

Ejemplo:

margin: 1em
El margen mide 1 renglón en todas las direcciones alrededor del elemento.

margin: tam_vertical tam_horizontal

tam_vertical es el tamaño de los márgenes superior e inferior.

tam_horizontal es el tamaño de los márgenes izquierdo y derecho.

Ejemplo:

margin: 1em 2em
El margen mide 1 renglón arriba y abajo, 2 renglones a la izquierda y derecha.

margin: tam_arr tam_der tam_ab tam_izq

tam_arr es el tamaño del márgen superior.

tam_der es el tamaño del márgen derecho.

tam_ab es el tamaño del márgen inferior.

tam_izq es el tamaño del márgen izquierdo.

Ejemplo:

margin: 3em 2em 4em 1em
El margen mide 3 renglones arriba, 2 a la derecha, 4 abajo y 1 a la izquierda.

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.


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>Modelo de cajas</title>
8	<style>
9	div {
10	margin: 1.5rem;
11	border: thick solid burlywood;
12	background-color: greenyellow;
13	}
14	</style>
15	</head>
16	<body>
17	<div>Contenido</div>
18	</body>
19	</html>

D. Relleno (padding)

Se puede especificar con las siguientes propiedades:

padding-top

Solo especifica el tamaño del relleno en la parte superior de la caja.

Ejemplo:

padding-top: 3vh

padding-bottom

Solo especifica el tamaño del relleno en la parte inferior de la caja.

Ejemplo:

padding-bottom: 50%

padding-left

Solo especifica el tamaño del relleno en el lado izquierdo de la caja.

Ejemplo:

padding-left: 8px

padding-right

Solo especifica el tamaño del relleno en el lado derecho de la caja.

Ejemplo:

padding-right: 3vw

padding: tamaño

Especifica el mismo tamaño de relleno arriba, abajo, a la izquierda y a la derecha.

Ejemplo:

padding: 1em
El relleno mide 1 renglón en todas las direcciones alrededor del elemento.

padding: tam_vertical tam_horizontal

tam_vertical es el tamaño de los rellenos superior e inferior.

tam_horizontal es el tamaño de los rellenos izquierdo y derecho.

Ejemplo:

padding: 1em 2em
El relleno mide 1 renglón arriba y abajo, 2 renglones a la izquierda y derecha.

padding: tam_arr tam_der tam_ab tam_izq

tam_arr es el tamaño del relleno superior.

tam_der es el tamaño del relleno derecho.

tam_ab es el tamaño del relleno inferior.

tam_izq es el tamaño del relleno izquierdo.

Ejemplo:

padding: 3em 2em 4em 1em
El relleno mide 3 renglones arriba, 2 a la derecha, 4 abajo y 1 a la izquierda.

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.


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>Relleno</title>
8	<style>
9	h1 {
10	padding-top: 0.5rem;
11	padding-left: 1rem;
12	padding-bottom: 1.5rem;
13	padding-right: 2rem;
14	background-color: cyan;
15	}
16
17	p {
18	padding: 0.5rem 2rem;
19	background-color: yellow;
20	}
21
22	div {
23	padding: 1rem;
24	background-color: red;
25	}
26
27	footer {
28	padding:
29	0.5rem 1rem 3rem 2rem;
30	background-color:
31	yellowgreen;
32	}
33	</style>
34	</head>
35	<body>
36	<h1>Relleno</h1>
37	<p>Párrafo</p>
38	<div>Div</div>
39	<footer>Footer</footer>
40	</body>
41	</html>

E. Borde (border)

Partes de un Borde

Ancho

Puede expresarse como un tamaño o con alguno de estos valores:

thin: Borde delgado.
medium: Borde de ancho mediano.
thick: Borde grueso.

Si no se pone, su valor por omisión es: medium.

Estilo

Puede expresarse con alguno de estos valores:

none

Sin borde.

dotted

El borde es una serie de puntos redondos.

dashed

El borde es una serie de guiones de esquinas cuadradas.

solid

El borde es una sola línea sólida.

double

El borde consiste en 2 líneas sólidas paralelas con espacio entre ellas.

La suma del ancho de las líneas y espacio debe ser igual al ancho del borde.

groove

El borde parece como si estuviera tallado dentro de la superficie.

ridge

El borde parece como si saliera de la superficie.

inset

Parece como si el contenido dentro del borde estuviera hundido en la superficie.

outset

Parece como si el contenido dentro del borde saliera de la superficie.

Si no se pone, su valor por omisión es: none.

Color

Se especifica como un color cualquiera.

Si no se pone, su valor por omisión es el color del texto del elemento.

Propiedades para Bordes

Estilo Detallado

border-top-width: Ancho del borde en la parte superior de la caja.
border-top-style: Estilo del borde en la parte superior de la caja.
border-top-color: Color del borde en la parte superior de la caja.
border-bottom-width: Ancho del borde en la parte inferior de la caja.
border-bottom-style: Estilo del borde en la parte inferior de la caja.
border-bottom-color: Color del borde en la parte inferior de la caja.
border-left-width: Ancho del borde en el lado izquierdo de la caja.
border-left-style: Estilo del borde en el lado izquierdo de la caja.
border-left-color: Color del borde en el lado izquierdo de la caja.
border-right-width: Ancho del borde en el lado derecho de la caja.
border-right-style: Estilo del borde en el lado derecho de la caja.
border-right-color: Color del borde en el lado derecho de la caja.

Combinando las Partes del Borde

Combina las tres partes de un borde. Las partes pueden ir en cualquier orden y 1 o 2 de los valores pueden faltar, en cuyo caso se toman los valores por omisión (medium, none y color actual).

border-top: Ancho, estilo y color del borde en la parte superior de la caja.
border-bottom: Ancho, estilo y color del borde en la parte inferior de la caja.
border-left: Ancho, estilo y color del borde en el lado izquierdo de la caja.
border-right: Ancho, estilo y color del borde en el lado derecho de la caja.
border: Ancho, estilo y color del borde único en las partes izquierda, derecha, superior e inferior de la caja.

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.


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>Bordes</title>
8	<style>
9	h1 {
10	border-top-width: thin;
11	border-top-style: solid;
12	border-top-color: cyan;
13	border-left:
14	medium dashed red;
15	border-right:
16	thick dotted green;
17	border-bottom:
18	thick double blue
19	}
20
21	nav {
22	border: thick groove cyan
23	}
24
25	p {
26	border: thick ridge pink
27	}
28
29	div {
30	border: thick inset yellowgreen
31	}
32
33	footer {
34	border: thick outset orange
35	}
36	</style>
37	</head>
38	<body>
39	<h1>Bordes</h1>
40	<nav>Groove</nav>
41	<p>Ridge</p>
42	<div>Inset</div>
43	<footer>Outset</footer>
44	</body>
45	</html>

F. Esquinas redondas (border-radius)

Las esquinas de la caja pueden ser redondas aunque no lleven borde.

border-top-right-radius

Tamaño del radio de la esquina superior derecha de la caja.

border-top-left-radius

Tamaño del radio de la esquina superior izquierda de la caja.

border-bottom-right-radius

Tamaño del radio de la esquina inferior derecha de la caja.

border-bottom-left-radius

Tamaño del radio de la esquina inferior izquierda de la caja.

border-radius: tam

tam es el tamaño del radio de las 4 esquinas de la caja.

border-radius: tam_arrizq_abder tam_arrder_abizq

tam_arrizq_abder es el tamaño del radio de las esquinas superior izquierda e inferior derecha de la caja.

tam_arrder_abizq es el tamaño del radio de las esquinas superior derecha e inferior izquierda de la caja.

border-radius: tam_arrizq tam_arrder_abizq tam_abder

tam_arrizq es el tamaño del radio de la esquina superior izquierda de la caja.

tam_arrder_abizq es el tamaño del radio de las esquinas superior derecha e inferior izquierda de la caja.

tam_abder es el tamaño del radio de las esquinas inferior derecha de la caja.

border-radius: tam_arrizq tam_arrder tam_abder tam_abizq

tam_arrizq es el tamaño del radio de la esquina superior izquierda de la caja.

tam_arr es el tamaño del radio de las esquinas superior derecha de la caja.

tam_abder es el tamaño del radio de las esquinas inferior derecha de la caja.

tam_abizq es el tamaño del radio de la esquina inferior izquierda de la caja.

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.


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>border-radius</title>
9	<style>
10	body {
11	color:yellow
12	}
13
14	h1 {
15	background-color: blue;
16	border-top-right-radius: 10px;
17	border-top-left-radius: 5px;
18	border-bottom-right-radius:
19	20px;
20	border-bottom-left-radius:
21	2rem
22	}
23
24	div {
25	background-color: royalblue;
26	padding: 0.5rem 1rem;
27	border-radius: 30px
28	}
29
30	p {
31	background-color: blueviolet;
32	padding: 0.5rem 1.5rem;
33	border-radius:
34	10px 20px 30px 40px;
35	}
36	</style>
37	</head>
38	<body>
39	<h1>border-radius</h1>
40	<div>Esquinas</div>
41	<p>Redondas</p>
42	</body>
43	</html>

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

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.


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>

8. El modelo de cajas

A. Longitudes en CSS

Solo para los más rudos

B. El modelo de cajas

Ejemplo

Salida

C. Margen (margin)

Ejemplo

Salida

D. Relleno (padding)

Ejemplo

Salida

E. Borde (border)

Partes de un Borde

Propiedades para Bordes

Estilo Detallado

Combinando las Partes del Borde

Ejemplo

Salida

F. Esquinas redondas (border-radius)

Ejemplo

Salida

G. Propiedades para tamaños

Ejemplo

Salida

H. Resumen