1
00:00:00,000 --> 00:00:02,497
¿Ya sabes cómo hicimos algo que

2
00:00:02,538 --> 00:00:04,578
se ve como un cuadro o caja, en nuestra pasada guía paso a paso,

3
00:00:04,591 --> 00:00:06,832
usando  y luego

4
00:00:06,909 --> 00:00:08,352
poniendo un color de fondo?

5
00:00:08,352 --> 00:00:10,855
Bueno, en realidad, cada elemento en tu

6
00:00:10,865 --> 00:00:13,438
página web es considerada una caja por el navegador,

7
00:00:13,438 --> 00:00:16,418
sea que a ti te parezca o no que se ve como una caja.

8
00:00:16,418 --> 00:00:18,348
Este encabezado es una caja,

9
00:00:18,348 --> 00:00:22,128
este párrafo es un caja, incluso este 

10
00:00:22,128 --> 00:00:25,178
que pusimos aquí es una caja. Algunas de las cajas

11
00:00:25,178 --> 00:00:29,688
son grandes, algunas son pequeñas, algunas son una línea

12
00:00:29,688 --> 00:00:33,428
como este , algunas son bloques, como .

13
00:00:33,428 --> 00:00:35,708
Pero todas son consideradas cajas.

14
00:00:35,708 --> 00:00:38,764
¿Por qué es importante? Porque hay algo

15
00:00:38,764 --> 00:00:41,054
llamado "Modelo de caja", el cual puedes

16
00:00:41,080 --> 00:00:44,100
ver en el diagrama que acabo de pegar.

17
00:00:44,100 --> 00:00:46,030
Cada caja tiene cuarto partes:

18
00:00:46,033 --> 00:00:48,513
el contenido real, el relleno,

19
00:00:48,517 --> 00:00:52,357
el borde y el margen. Podemos usar CSS

20
00:00:52,357 --> 00:00:54,437
para modificar el relleno, el borde y el margen.

21
00:00:54,437 --> 00:00:56,507
Así que pronto entenderás qué es

22
00:00:56,507 --> 00:00:59,177
todo esto en realidad. Empecemos con el margen.

23
00:00:59,177 --> 00:01:01,657
Es el área transparente al rededor de la caja

24
00:01:01,672 --> 00:01:03,822
que separa la caja de otros elementos.

25
00:01:03,822 --> 00:01:06,742
Especificaremos el margen usando nuestra

26
00:01:06,749 --> 00:01:10,169
unidad favorita: pixeles. Para agregar 15 pixeles

27
00:01:10,169 --> 00:01:12,799
al margen en cada lado de la caja de

28
00:01:12,799 --> 00:01:20,589
Información Oficial, sólo escribimos: "margin: 15px;".

29
00:01:20,589 --> 00:01:22,284
¿Vieron el cambio?

30
00:01:22,307 --> 00:01:25,027
¿Qué pasa si queremos una cantidad diferente

31
00:01:25,027 --> 00:01:27,237
de margen en cada uno de los lados? ¿Algo más grande

32
00:01:27,237 --> 00:01:29,647
arriba y abajo que en los lados? Podemos

33
00:01:29,647 --> 00:01:31,857
escribir esas cantidades en el orden de las manecillas de reloj,

34
00:01:31,857 --> 00:01:37,573
empezando por la parte de arriba. Entonces arriba 15px, derecha 0px,

35
00:01:37,573 --> 00:01:43,273
abajo 10px, izquierda 6px.

36
00:01:43,273 --> 00:01:46,363
O podemos usar propiedades específicas para cada lado,

37
00:01:46,363 --> 00:01:48,813
pero sólo queremos especificar pocos lados.

38
00:01:48,813 --> 00:01:52,303
Sólo queremos poner espacio alrededor de la fotografía del gato,

39
00:01:52,303 --> 00:01:56,750
del lado derecho, y luego,

40
00:01:56,762 --> 00:02:01,302
también ponemos algo de espacio en la parte de abajo...

41
00:02:01,302 --> 00:02:04,162
y está bien si dejamos el margen por defecto en los

42
00:02:04,162 --> 00:02:06,742
lados restantes. También hay un valor

43
00:02:06,742 --> 00:02:08,642
especial para el margen que nos va a ayudar a hacer

44
00:02:08,644 --> 00:02:11,004
cosas extraordinarias en nuestras páginas. Para mostrar eso,

45
00:02:11,004 --> 00:02:14,904
voy a poner un "" alrededor de toda la página.

46
00:02:14,904 --> 00:02:18,194
y le voy a asignar el ID "container."

47
00:02:18,194 --> 00:02:22,784
Voy a poner esta etiqueta aquí abajo para que contenga todo.

48
00:02:22,784 --> 00:02:27,004
Ahora, voy a añadir una regla a este ""

49
00:02:27,004 --> 00:02:30,824
para que tenga una anchura de 400 pixeles

50
00:02:30,824 --> 00:02:33,814
y lo voy a centrar en la página.

51
00:02:33,814 --> 00:02:37,744
Voy a especificar un margen izquierdo de "margin-left: 100px;",

52
00:02:37,744 --> 00:02:40,754
porque así yo lo veo centrado,

53
00:02:40,754 --> 00:02:42,584
pero tal vez tú no lo veas centrado, porque

54
00:02:42,594 --> 00:02:45,074
tu navegador puede ser más grande o más pequeño.

55
00:02:45,079 --> 00:02:47,109
Lo que queremos es poder decir, "dale el margen

56
00:02:47,109 --> 00:02:49,343
que sea necesario para que los dos lados

57
00:02:49,343 --> 00:02:52,121
queden del mismo tamaño."

58
00:02:52,121 --> 00:02:55,871
Esto es exactamente lo que hace "margin: auto;".

59
00:02:55,871 --> 00:02:59,951
Y es una manera genial de centrar "´s" en una página.

60
00:02:59,951 --> 00:03:01,831
Ahora que hemos centrado ese "",

61
00:03:01,831 --> 00:03:03,954
probablemente queremos modificar esto

62
00:03:03,954 --> 00:03:06,374
añadiendo un borde alrededor de la orilla

63
00:03:06,374 --> 00:03:09,653
usando las propiedades de bordes de CSS.

64
00:03:09,653 --> 00:03:13,483
Vamos a añadir un borde rojo a este "".

65
00:03:13,483 --> 00:03:15,283
Tecleamos "border:" y luego tenemos que

66
00:03:15,283 --> 00:03:16,943
especificar tres aspectos del borde:

67
00:03:16,943 --> 00:03:19,783
grosor, estilo y color. Para un borde

68
00:03:19,783 --> 00:03:23,473
delgado, sólo debo teclear "1px,", para una

69
00:03:23,473 --> 00:03:25,633
línea sólida nada extraordinaria, teclearemos

70
00:03:25,639 --> 00:03:28,969
"solid", y... para que sea roja

71
00:03:28,969 --> 00:03:31,649
voy a hacer que aparezca el selector de color RGB y

72
00:03:31,649 --> 00:03:37,769
seleccionar un bonito, rojo fuego. Ok. Igual que con

73
00:03:37,769 --> 00:03:39,919
el margen, podemos especificar el borde

74
00:03:39,919 --> 00:03:42,789
para sólo uno de los lados. Si queremos un

75
00:03:42,798 --> 00:03:46,078
borde morado y grueso en la parte superior,

76
00:03:46,078 --> 00:03:53,698
añadiremos otra propiedad: "border-top: 10px solid purple;"

77
00:03:53,698 --> 00:03:56,538
¡Genial! Ahora vamos a añadir

78
00:03:56,545 --> 00:03:59,785
un marco a la imagen, y vamos a jugar con

79
00:03:59,785 --> 00:04:02,225
los estilos de bordes. Así que vamos arriba

80
00:04:02,225 --> 00:04:07,605
a nuestro "cute-cat", y vamos a ver... "border: 6px,"

81
00:04:07,605 --> 00:04:12,075
vamos a probar con "groove red". Ok.

82
00:04:12,075 --> 00:04:16,405
No, no me gusta "groove", vamos a probar con "double",

83
00:04:16,405 --> 00:04:19,185
vamos a probar con "ridge". ¡Ajá! Ahora eso se ve como

84
00:04:19,185 --> 00:04:22,665
un marco. Ahora, ¿qué pasa con el borde que tenemos al rededor de

85
00:04:22,665 --> 00:04:25,985
nuestra Información Oficial? Vamos a ver, "border:",

86
00:04:25,985 --> 00:04:28,405
no lo vamos a hacer muy grande, "2px",

87
00:04:28,405 --> 00:04:31,185
vamos a probar "dotted" y luego, déjenme seleccionar...

88
00:04:31,200 --> 00:04:35,960
un gris delicado, déjenme probar

89
00:04:35,960 --> 00:04:39,650
con "dashed". Ok, esto es lo que quiero.

90
00:04:39,650 --> 00:04:40,958
Ahora con todos estos bordes,

91
00:04:40,958 --> 00:04:42,438
hay algo que me molesta un poco.

92
00:04:42,438 --> 00:04:45,788
En realidad, hay algo que me molesta mucho.

93
00:04:45,788 --> 00:04:50,608
¿Ven cómo el texto se está encimando en el borde de "container"?

94
00:04:50,608 --> 00:04:54,928
Y también ¿ven cómo se encima el texto de la Información Oficial?

95
00:04:54,928 --> 00:04:56,518
Eso se ve grotesco,

96
00:04:56,518 --> 00:04:59,188
y el texto se vuelve difícil de leer.

97
00:04:59,188 --> 00:05:02,198
Ahí es donde usamos el relleno (padding). Siempre que

98
00:05:02,198 --> 00:05:03,778
tus elementos tengan colores de fondo o

99
00:05:03,778 --> 00:05:05,392
bordes, querrás añadir relleno

100
00:05:05,392 --> 00:05:07,632
para poner un espacio entre

101
00:05:07,632 --> 00:05:10,092
el contenido y las orillas. Vamos a añadir

102
00:05:10,106 --> 00:05:13,296
relleno ("padding") en "container", vamos a poner

103
00:05:13,315 --> 00:05:17,985
15 pixeles alrededor de "container".

104
00:05:17,991 --> 00:05:21,241
Mucho mejor. Vamos a poner relleno

105
00:05:21,241 --> 00:05:23,371
en "official-info", veamos:

106
00:05:23,372 --> 00:05:27,382
"padding: 6px,", oh, hermoso.

107
00:05:27,382 --> 00:05:29,362
Ahora, no necesitamos añadir relleno a la imagen,

108
00:05:29,363 --> 00:05:31,003
porque las imágenes en realidad se ven bien

109
00:05:31,012 --> 00:05:33,442
dentro de marcos como éste.

110
00:05:33,442 --> 00:05:35,682
Y aquí lo tienen: el Modelo de Caja.

111
00:05:35,682 --> 00:05:38,362
Margen, borde y relleno. Usé valores grandes y

112
00:05:38,362 --> 00:05:40,392
colores brillantes para que lo pudieran apreciar,

113
00:05:40,392 --> 00:05:42,680
pero mi página se ve un poco cursi.

114
00:05:42,680 --> 00:05:45,140
Si quieres que tu página luzca pulcra y sofisticada

115
00:05:45,140 --> 00:05:47,910
prueba usando blancos y grises más sutiles.

116
00:05:47,910 --> 00:05:49,230
Y hagas lo que hagas,

117
00:05:49,230 --> 00:05:50,870
asegúrate de usar esas propiedades, porque

118
00:05:50,870 --> 00:05:53,397
eso tendrá grandes efectos en tu página, cómo

119
00:05:53,397 --> 00:05:54,907
se ve y se siente.