WEBVTT

00:00:00.000 --> 00:00:02.497
¿Ya sabes cómo hicimos algo que

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

00:00:04.591 --> 00:00:06.832
usando  y luego

00:00:06.909 --> 00:00:08.352
poniendo un color de fondo?

00:00:08.352 --> 00:00:10.855
Bueno, en realidad, cada elemento en tu

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

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

00:00:16.418 --> 00:00:18.348
Este encabezado es una caja,

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

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

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

00:00:29.688 --> 00:00:33.428
como este , algunas son bloques, como .

00:00:33.428 --> 00:00:35.708
Pero todas son consideradas cajas.

00:00:35.708 --> 00:00:38.764
¿Por qué es importante? Porque hay algo

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

00:00:41.080 --> 00:00:44.100
ver en el diagrama que acabo de pegar.

00:00:44.100 --> 00:00:46.030
Cada caja tiene cuarto partes:

00:00:46.033 --> 00:00:48.513
el contenido real, el relleno,

00:00:48.517 --> 00:00:52.357
el borde y el margen. Podemos usar CSS

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

00:00:54.437 --> 00:00:56.507
Así que pronto entenderás qué es

00:00:56.507 --> 00:00:59.177
todo esto en realidad. Empecemos con el margen.

00:00:59.177 --> 00:01:01.657
Es el área transparente al rededor de la caja

00:01:01.672 --> 00:01:03.822
que separa la caja de otros elementos.

00:01:03.822 --> 00:01:06.742
Especificaremos el margen usando nuestra

00:01:06.749 --> 00:01:10.169
unidad favorita: pixeles. Para agregar 15 pixeles

00:01:10.169 --> 00:01:12.799
al margen en cada lado de la caja de

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

00:01:20.589 --> 00:01:22.284
¿Vieron el cambio?

00:01:22.307 --> 00:01:25.027
¿Qué pasa si queremos una cantidad diferente

00:01:25.027 --> 00:01:27.237
de margen en cada uno de los lados? ¿Algo más grande

00:01:27.237 --> 00:01:29.647
arriba y abajo que en los lados? Podemos

00:01:29.647 --> 00:01:31.857
escribir esas cantidades en el orden de las manecillas de reloj,

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

00:01:37.573 --> 00:01:43.273
abajo 10px, izquierda 6px.

00:01:43.273 --> 00:01:46.363
O podemos usar propiedades específicas para cada lado,

00:01:46.363 --> 00:01:48.813
pero sólo queremos especificar pocos lados.

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

00:01:52.303 --> 00:01:56.750
del lado derecho, y luego,

00:01:56.762 --> 00:02:01.302
también ponemos algo de espacio en la parte de abajo...

00:02:01.302 --> 00:02:04.162
y está bien si dejamos el margen por defecto en los

00:02:04.162 --> 00:02:06.742
lados restantes. También hay un valor

00:02:06.742 --> 00:02:08.642
especial para el margen que nos va a ayudar a hacer

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

00:02:11.004 --> 00:02:14.904
voy a poner un "" alrededor de toda la página.

00:02:14.904 --> 00:02:18.194
y le voy a asignar el ID "container."

00:02:18.194 --> 00:02:22.784
Voy a poner esta etiqueta aquí abajo para que contenga todo.

00:02:22.784 --> 00:02:27.004
Ahora, voy a añadir una regla a este ""

00:02:27.004 --> 00:02:30.824
para que tenga una anchura de 400 pixeles

00:02:30.824 --> 00:02:33.814
y lo voy a centrar en la página.

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

00:02:37.744 --> 00:02:40.754
porque así yo lo veo centrado,

00:02:40.754 --> 00:02:42.584
pero tal vez tú no lo veas centrado, porque

00:02:42.594 --> 00:02:45.074
tu navegador puede ser más grande o más pequeño.

00:02:45.079 --> 00:02:47.109
Lo que queremos es poder decir, "dale el margen

00:02:47.109 --> 00:02:49.343
que sea necesario para que los dos lados

00:02:49.343 --> 00:02:52.121
queden del mismo tamaño."

00:02:52.121 --> 00:02:55.871
Esto es exactamente lo que hace "margin: auto;".

00:02:55.871 --> 00:02:59.951
Y es una manera genial de centrar "´s" en una página.

00:02:59.951 --> 00:03:01.831
Ahora que hemos centrado ese "",

00:03:01.831 --> 00:03:03.954
probablemente queremos modificar esto

00:03:03.954 --> 00:03:06.374
añadiendo un borde alrededor de la orilla

00:03:06.374 --> 00:03:09.653
usando las propiedades de bordes de CSS.

00:03:09.653 --> 00:03:13.483
Vamos a añadir un borde rojo a este "".

00:03:13.483 --> 00:03:15.283
Tecleamos "border:" y luego tenemos que

00:03:15.283 --> 00:03:16.943
especificar tres aspectos del borde:

00:03:16.943 --> 00:03:19.783
grosor, estilo y color. Para un borde

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

00:03:23.473 --> 00:03:25.633
línea sólida nada extraordinaria, teclearemos

00:03:25.639 --> 00:03:28.969
"solid", y... para que sea roja

00:03:28.969 --> 00:03:31.649
voy a hacer que aparezca el selector de color RGB y

00:03:31.649 --> 00:03:37.769
seleccionar un bonito, rojo fuego. Ok. Igual que con

00:03:37.769 --> 00:03:39.919
el margen, podemos especificar el borde

00:03:39.919 --> 00:03:42.789
para sólo uno de los lados. Si queremos un

00:03:42.798 --> 00:03:46.078
borde morado y grueso en la parte superior,

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

00:03:53.698 --> 00:03:56.538
¡Genial! Ahora vamos a añadir

00:03:56.545 --> 00:03:59.785
un marco a la imagen, y vamos a jugar con

00:03:59.785 --> 00:04:02.225
los estilos de bordes. Así que vamos arriba

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

00:04:07.605 --> 00:04:12.075
vamos a probar con "groove red". Ok.

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

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

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

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

00:04:25.985 --> 00:04:28.405
no lo vamos a hacer muy grande, "2px",

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

00:04:31.200 --> 00:04:35.960
un gris delicado, déjenme probar

00:04:35.960 --> 00:04:39.650
con "dashed". Ok, esto es lo que quiero.

00:04:39.650 --> 00:04:40.958
Ahora con todos estos bordes,

00:04:40.958 --> 00:04:42.438
hay algo que me molesta un poco.

00:04:42.438 --> 00:04:45.788
En realidad, hay algo que me molesta mucho.

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

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

00:04:54.928 --> 00:04:56.518
Eso se ve grotesco,

00:04:56.518 --> 00:04:59.188
y el texto se vuelve difícil de leer.

00:04:59.188 --> 00:05:02.198
Ahí es donde usamos el relleno (padding). Siempre que

00:05:02.198 --> 00:05:03.778
tus elementos tengan colores de fondo o

00:05:03.778 --> 00:05:05.392
bordes, querrás añadir relleno

00:05:05.392 --> 00:05:07.632
para poner un espacio entre

00:05:07.632 --> 00:05:10.092
el contenido y las orillas. Vamos a añadir

00:05:10.106 --> 00:05:13.296
relleno ("padding") en "container", vamos a poner

00:05:13.315 --> 00:05:17.985
15 pixeles alrededor de "container".

00:05:17.991 --> 00:05:21.241
Mucho mejor. Vamos a poner relleno

00:05:21.241 --> 00:05:23.371
en "official-info", veamos:

00:05:23.372 --> 00:05:27.382
"padding: 6px,", oh, hermoso.

00:05:27.382 --> 00:05:29.362
Ahora, no necesitamos añadir relleno a la imagen,

00:05:29.363 --> 00:05:31.003
porque las imágenes en realidad se ven bien

00:05:31.012 --> 00:05:33.442
dentro de marcos como éste.

00:05:33.442 --> 00:05:35.682
Y aquí lo tienen: el Modelo de Caja.

00:05:35.682 --> 00:05:38.362
Margen, borde y relleno. Usé valores grandes y

00:05:38.362 --> 00:05:40.392
colores brillantes para que lo pudieran apreciar,

00:05:40.392 --> 00:05:42.680
pero mi página se ve un poco cursi.

00:05:42.680 --> 00:05:45.140
Si quieres que tu página luzca pulcra y sofisticada

00:05:45.140 --> 00:05:47.910
prueba usando blancos y grises más sutiles.

00:05:47.910 --> 00:05:49.230
Y hagas lo que hagas,

00:05:49.230 --> 00:05:50.870
asegúrate de usar esas propiedades, porque

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

00:05:53.397 --> 00:05:54.907
se ve y se siente.