0:00:00.000,0:00:02.497
¿Ya sabes cómo hicimos algo que

0:00:02.538,0:00:04.578
se ve como un cuadro o caja, en nuestra pasada guía paso a paso,

0:00:04.591,0:00:06.832
usando  y luego

0:00:06.909,0:00:08.352
poniendo un color de fondo?

0:00:08.352,0:00:10.855
Bueno, en realidad, cada elemento en tu

0:00:10.865,0:00:13.438
página web es considerada una caja por el navegador,

0:00:13.438,0:00:16.418
sea que a ti te parezca o no que se ve como una caja.

0:00:16.418,0:00:18.348
Este encabezado es una caja,

0:00:18.348,0:00:22.128
este párrafo es un caja, incluso este

0:00:22.128,0:00:25.178
que pusimos aquí es una caja. Algunas de las cajas

0:00:25.178,0:00:29.688
son grandes, algunas son pequeñas, algunas son una línea

0:00:29.688,0:00:33.428
como este , algunas son bloques, como .

0:00:33.428,0:00:35.708
Pero todas son consideradas cajas.

0:00:35.708,0:00:38.764
¿Por qué es importante? Porque hay algo

0:00:38.764,0:00:41.054
llamado "Modelo de caja", el cual puedes

0:00:41.080,0:00:44.100
ver en el diagrama que acabo de pegar.

0:00:44.100,0:00:46.030
Cada caja tiene cuarto partes:

0:00:46.033,0:00:48.513
el contenido real, el relleno,

0:00:48.517,0:00:52.357
el borde y el margen. Podemos usar CSS

0:00:52.357,0:00:54.437
para modificar el relleno, el borde y el margen.

0:00:54.437,0:00:56.507
Así que pronto entenderás qué es

0:00:56.507,0:00:59.177
todo esto en realidad. Empecemos con el margen.

0:00:59.177,0:01:01.657
Es el área transparente al rededor de la caja

0:01:01.672,0:01:03.822
que separa la caja de otros elementos.

0:01:03.822,0:01:06.742
Especificaremos el margen usando nuestra

0:01:06.749,0:01:10.169
unidad favorita: pixeles. Para agregar 15 pixeles

0:01:10.169,0:01:12.799
al margen en cada lado de la caja de

0:01:12.799,0:01:20.589
Información Oficial, sólo escribimos: "margin: 15px;".

0:01:20.589,0:01:22.284
¿Vieron el cambio?

0:01:22.307,0:01:25.027
¿Qué pasa si queremos una cantidad diferente

0:01:25.027,0:01:27.237
de margen en cada uno de los lados? ¿Algo más grande

0:01:27.237,0:01:29.647
arriba y abajo que en los lados? Podemos

0:01:29.647,0:01:31.857
escribir esas cantidades en el orden de las manecillas de reloj,

0:01:31.857,0:01:37.573
empezando por la parte de arriba. Entonces arriba 15px, derecha 0px,

0:01:37.573,0:01:43.273
abajo 10px, izquierda 6px.

0:01:43.273,0:01:46.363
O podemos usar propiedades específicas para cada lado,

0:01:46.363,0:01:48.813
pero sólo queremos especificar pocos lados.

0:01:48.813,0:01:52.303
Sólo queremos poner espacio alrededor de la fotografía del gato,

0:01:52.303,0:01:56.750
del lado derecho, y luego,

0:01:56.762,0:02:01.302
también ponemos algo de espacio en la parte de abajo...

0:02:01.302,0:02:04.162
y está bien si dejamos el margen por defecto en los

0:02:04.162,0:02:06.742
lados restantes. También hay un valor

0:02:06.742,0:02:08.642
especial para el margen que nos va a ayudar a hacer

0:02:08.644,0:02:11.004
cosas extraordinarias en nuestras páginas. Para mostrar eso,

0:02:11.004,0:02:14.904
voy a poner un "" alrededor de toda la página.

0:02:14.904,0:02:18.194
y le voy a asignar el ID "container."

0:02:18.194,0:02:22.784
Voy a poner esta etiqueta aquí abajo para que contenga todo.

0:02:22.784,0:02:27.004
Ahora, voy a añadir una regla a este ""

0:02:27.004,0:02:30.824
para que tenga una anchura de 400 pixeles

0:02:30.824,0:02:33.814
y lo voy a centrar en la página.

0:02:33.814,0:02:37.744
Voy a especificar un margen izquierdo de "margin-left: 100px;",

0:02:37.744,0:02:40.754
porque así yo lo veo centrado,

0:02:40.754,0:02:42.584
pero tal vez tú no lo veas centrado, porque

0:02:42.594,0:02:45.074
tu navegador puede ser más grande o más pequeño.

0:02:45.079,0:02:47.109
Lo que queremos es poder decir, "dale el margen

0:02:47.109,0:02:49.343
que sea necesario para que los dos lados

0:02:49.343,0:02:52.121
queden del mismo tamaño."

0:02:52.121,0:02:55.871
Esto es exactamente lo que hace "margin: auto;".

0:02:55.871,0:02:59.951
Y es una manera genial de centrar "´s" en una página.

0:02:59.951,0:03:01.831
Ahora que hemos centrado ese "",

0:03:01.831,0:03:03.954
probablemente queremos modificar esto

0:03:03.954,0:03:06.374
añadiendo un borde alrededor de la orilla

0:03:06.374,0:03:09.653
usando las propiedades de bordes de CSS.

0:03:09.653,0:03:13.483
Vamos a añadir un borde rojo a este "".

0:03:13.483,0:03:15.283
Tecleamos "border:" y luego tenemos que

0:03:15.283,0:03:16.943
especificar tres aspectos del borde:

0:03:16.943,0:03:19.783
grosor, estilo y color. Para un borde

0:03:19.783,0:03:23.473
delgado, sólo debo teclear "1px,", para una

0:03:23.473,0:03:25.633
línea sólida nada extraordinaria, teclearemos

0:03:25.639,0:03:28.969
"solid", y... para que sea roja

0:03:28.969,0:03:31.649
voy a hacer que aparezca el selector de color RGB y

0:03:31.649,0:03:37.769
seleccionar un bonito, rojo fuego. Ok. Igual que con

0:03:37.769,0:03:39.919
el margen, podemos especificar el borde

0:03:39.919,0:03:42.789
para sólo uno de los lados. Si queremos un

0:03:42.798,0:03:46.078
borde morado y grueso en la parte superior,

0:03:46.078,0:03:53.698
añadiremos otra propiedad: "border-top: 10px solid purple;"

0:03:53.698,0:03:56.538
¡Genial! Ahora vamos a añadir

0:03:56.545,0:03:59.785
un marco a la imagen, y vamos a jugar con

0:03:59.785,0:04:02.225
los estilos de bordes. Así que vamos arriba

0:04:02.225,0:04:07.605
a nuestro "cute-cat", y vamos a ver... "border: 6px,"

0:04:07.605,0:04:12.075
vamos a probar con "groove red". Ok.

0:04:12.075,0:04:16.405
No, no me gusta "groove", vamos a probar con "double",

0:04:16.405,0:04:19.185
vamos a probar con "ridge". ¡Ajá! Ahora eso se ve como

0:04:19.185,0:04:22.665
un marco. Ahora, ¿qué pasa con el borde que tenemos al rededor de

0:04:22.665,0:04:25.985
nuestra Información Oficial? Vamos a ver, "border:",

0:04:25.985,0:04:28.405
no lo vamos a hacer muy grande, "2px",

0:04:28.405,0:04:31.185
vamos a probar "dotted" y luego, déjenme seleccionar...

0:04:31.200,0:04:35.960
un gris delicado, déjenme probar

0:04:35.960,0:04:39.650
con "dashed". Ok, esto es lo que quiero.

0:04:39.650,0:04:40.958
Ahora con todos estos bordes,

0:04:40.958,0:04:42.438
hay algo que me molesta un poco.

0:04:42.438,0:04:45.788
En realidad, hay algo que me molesta mucho.

0:04:45.788,0:04:50.608
¿Ven cómo el texto se está encimando en el borde de "container"?

0:04:50.608,0:04:54.928
Y también ¿ven cómo se encima el texto de la Información Oficial?

0:04:54.928,0:04:56.518
Eso se ve grotesco,

0:04:56.518,0:04:59.188
y el texto se vuelve difícil de leer.

0:04:59.188,0:05:02.198
Ahí es donde usamos el relleno (padding). Siempre que

0:05:02.198,0:05:03.778
tus elementos tengan colores de fondo o

0:05:03.778,0:05:05.392
bordes, querrás añadir relleno

0:05:05.392,0:05:07.632
para poner un espacio entre

0:05:07.632,0:05:10.092
el contenido y las orillas. Vamos a añadir

0:05:10.106,0:05:13.296
relleno ("padding") en "container", vamos a poner

0:05:13.315,0:05:17.985
15 pixeles alrededor de "container".

0:05:17.991,0:05:21.241
Mucho mejor. Vamos a poner relleno

0:05:21.241,0:05:23.371
en "official-info", veamos:

0:05:23.372,0:05:27.382
"padding: 6px,", oh, hermoso.

0:05:27.382,0:05:29.362
Ahora, no necesitamos añadir relleno a la imagen,

0:05:29.363,0:05:31.003
porque las imágenes en realidad se ven bien

0:05:31.012,0:05:33.442
dentro de marcos como éste.

0:05:33.442,0:05:35.682
Y aquí lo tienen: el Modelo de Caja.

0:05:35.682,0:05:38.362
Margen, borde y relleno. Usé valores grandes y

0:05:38.362,0:05:40.392
colores brillantes para que lo pudieran apreciar,

0:05:40.392,0:05:42.680
pero mi página se ve un poco cursi.

0:05:42.680,0:05:45.140
Si quieres que tu página luzca pulcra y sofisticada

0:05:45.140,0:05:47.910
prueba usando blancos y grises más sutiles.

0:05:47.910,0:05:49.230
Y hagas lo que hagas,

0:05:49.230,0:05:50.870
asegúrate de usar esas propiedades, porque

0:05:50.870,0:05:53.397
eso tendrá grandes efectos en tu página, cómo

0:05:53.397,0:05:54.907
se ve y se siente.