[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:02.50,Default,,0000,0000,0000,,¿Ya sabes cómo hicimos algo que
Dialogue: 0,0:00:02.54,0:00:04.58,Default,,0000,0000,0000,,se ve como un cuadro o caja, en nuestra pasada guía paso a paso,
Dialogue: 0,0:00:04.59,0:00:06.83,Default,,0000,0000,0000,,usando  y luego
Dialogue: 0,0:00:06.91,0:00:08.35,Default,,0000,0000,0000,,poniendo un color de fondo?
Dialogue: 0,0:00:08.35,0:00:10.86,Default,,0000,0000,0000,,Bueno, en realidad, cada elemento en tu
Dialogue: 0,0:00:10.86,0:00:13.44,Default,,0000,0000,0000,,página web es considerada una caja por el navegador,
Dialogue: 0,0:00:13.44,0:00:16.42,Default,,0000,0000,0000,,sea que a ti te parezca o no que se ve como una caja.
Dialogue: 0,0:00:16.42,0:00:18.35,Default,,0000,0000,0000,,Este encabezado es una caja,
Dialogue: 0,0:00:18.35,0:00:22.13,Default,,0000,0000,0000,,este párrafo es un caja, incluso este 
Dialogue: 0,0:00:22.13,0:00:25.18,Default,,0000,0000,0000,,que pusimos aquí es una caja. Algunas de las cajas
Dialogue: 0,0:00:25.18,0:00:29.69,Default,,0000,0000,0000,,son grandes, algunas son pequeñas, algunas son una línea
Dialogue: 0,0:00:29.69,0:00:33.43,Default,,0000,0000,0000,,como este , algunas son bloques, como .
Dialogue: 0,0:00:33.43,0:00:35.71,Default,,0000,0000,0000,,Pero todas son consideradas cajas.
Dialogue: 0,0:00:35.71,0:00:38.76,Default,,0000,0000,0000,,¿Por qué es importante? Porque hay algo
Dialogue: 0,0:00:38.76,0:00:41.05,Default,,0000,0000,0000,,llamado "Modelo de caja", el cual puedes
Dialogue: 0,0:00:41.08,0:00:44.10,Default,,0000,0000,0000,,ver en el diagrama que acabo de pegar.
Dialogue: 0,0:00:44.10,0:00:46.03,Default,,0000,0000,0000,,Cada caja tiene cuarto partes:
Dialogue: 0,0:00:46.03,0:00:48.51,Default,,0000,0000,0000,,el contenido real, el relleno,
Dialogue: 0,0:00:48.52,0:00:52.36,Default,,0000,0000,0000,,el borde y el margen. Podemos usar CSS
Dialogue: 0,0:00:52.36,0:00:54.44,Default,,0000,0000,0000,,para modificar el relleno, el borde y el margen.
Dialogue: 0,0:00:54.44,0:00:56.51,Default,,0000,0000,0000,,Así que pronto entenderás qué es
Dialogue: 0,0:00:56.51,0:00:59.18,Default,,0000,0000,0000,,todo esto en realidad. Empecemos con el margen.
Dialogue: 0,0:00:59.18,0:01:01.66,Default,,0000,0000,0000,,Es el área transparente al rededor de la caja
Dialogue: 0,0:01:01.67,0:01:03.82,Default,,0000,0000,0000,,que separa la caja de otros elementos.
Dialogue: 0,0:01:03.82,0:01:06.74,Default,,0000,0000,0000,,Especificaremos el margen usando nuestra
Dialogue: 0,0:01:06.75,0:01:10.17,Default,,0000,0000,0000,,unidad favorita: pixeles. Para agregar 15 pixeles
Dialogue: 0,0:01:10.17,0:01:12.80,Default,,0000,0000,0000,,al margen en cada lado de la caja de
Dialogue: 0,0:01:12.80,0:01:20.59,Default,,0000,0000,0000,,Información Oficial, sólo escribimos: "margin: 15px;".
Dialogue: 0,0:01:20.59,0:01:22.28,Default,,0000,0000,0000,,¿Vieron el cambio?
Dialogue: 0,0:01:22.31,0:01:25.03,Default,,0000,0000,0000,,¿Qué pasa si queremos una cantidad diferente
Dialogue: 0,0:01:25.03,0:01:27.24,Default,,0000,0000,0000,,de margen en cada uno de los lados? ¿Algo más grande
Dialogue: 0,0:01:27.24,0:01:29.65,Default,,0000,0000,0000,,arriba y abajo que en los lados? Podemos
Dialogue: 0,0:01:29.65,0:01:31.86,Default,,0000,0000,0000,,escribir esas cantidades en el orden de las manecillas de reloj,
Dialogue: 0,0:01:31.86,0:01:37.57,Default,,0000,0000,0000,,empezando por la parte de arriba. Entonces arriba 15px, derecha 0px,
Dialogue: 0,0:01:37.57,0:01:43.27,Default,,0000,0000,0000,,abajo 10px, izquierda 6px.
Dialogue: 0,0:01:43.27,0:01:46.36,Default,,0000,0000,0000,,O podemos usar propiedades específicas para cada lado,
Dialogue: 0,0:01:46.36,0:01:48.81,Default,,0000,0000,0000,,pero sólo queremos especificar pocos lados.
Dialogue: 0,0:01:48.81,0:01:52.30,Default,,0000,0000,0000,,Sólo queremos poner espacio alrededor de la fotografía del gato,
Dialogue: 0,0:01:52.30,0:01:56.75,Default,,0000,0000,0000,,del lado derecho, y luego,
Dialogue: 0,0:01:56.76,0:02:01.30,Default,,0000,0000,0000,,también ponemos algo de espacio en la parte de abajo...
Dialogue: 0,0:02:01.30,0:02:04.16,Default,,0000,0000,0000,,y está bien si dejamos el margen por defecto en los
Dialogue: 0,0:02:04.16,0:02:06.74,Default,,0000,0000,0000,,lados restantes. También hay un valor
Dialogue: 0,0:02:06.74,0:02:08.64,Default,,0000,0000,0000,,especial para el margen que nos va a ayudar a hacer
Dialogue: 0,0:02:08.64,0:02:11.00,Default,,0000,0000,0000,,cosas extraordinarias en nuestras páginas. Para mostrar eso,
Dialogue: 0,0:02:11.00,0:02:14.90,Default,,0000,0000,0000,,voy a poner un "" alrededor de toda la página.
Dialogue: 0,0:02:14.90,0:02:18.19,Default,,0000,0000,0000,,y le voy a asignar el ID "container."
Dialogue: 0,0:02:18.19,0:02:22.78,Default,,0000,0000,0000,,Voy a poner esta etiqueta aquí abajo para que contenga todo.
Dialogue: 0,0:02:22.78,0:02:27.00,Default,,0000,0000,0000,,Ahora, voy a añadir una regla a este ""
Dialogue: 0,0:02:27.00,0:02:30.82,Default,,0000,0000,0000,,para que tenga una anchura de 400 pixeles
Dialogue: 0,0:02:30.82,0:02:33.81,Default,,0000,0000,0000,,y lo voy a centrar en la página.
Dialogue: 0,0:02:33.81,0:02:37.74,Default,,0000,0000,0000,,Voy a especificar un margen izquierdo de "margin-left: 100px;",
Dialogue: 0,0:02:37.74,0:02:40.75,Default,,0000,0000,0000,,porque así yo lo veo centrado,
Dialogue: 0,0:02:40.75,0:02:42.58,Default,,0000,0000,0000,,pero tal vez tú no lo veas centrado, porque
Dialogue: 0,0:02:42.59,0:02:45.07,Default,,0000,0000,0000,,tu navegador puede ser más grande o más pequeño.
Dialogue: 0,0:02:45.08,0:02:47.11,Default,,0000,0000,0000,,Lo que queremos es poder decir, "dale el margen
Dialogue: 0,0:02:47.11,0:02:49.34,Default,,0000,0000,0000,,que sea necesario para que los dos lados
Dialogue: 0,0:02:49.34,0:02:52.12,Default,,0000,0000,0000,,queden del mismo tamaño."
Dialogue: 0,0:02:52.12,0:02:55.87,Default,,0000,0000,0000,,Esto es exactamente lo que hace "margin: auto;".
Dialogue: 0,0:02:55.87,0:02:59.95,Default,,0000,0000,0000,,Y es una manera genial de centrar "´s" en una página.
Dialogue: 0,0:02:59.95,0:03:01.83,Default,,0000,0000,0000,,Ahora que hemos centrado ese "",
Dialogue: 0,0:03:01.83,0:03:03.95,Default,,0000,0000,0000,,probablemente queremos modificar esto
Dialogue: 0,0:03:03.95,0:03:06.37,Default,,0000,0000,0000,,añadiendo un borde alrededor de la orilla
Dialogue: 0,0:03:06.37,0:03:09.65,Default,,0000,0000,0000,,usando las propiedades de bordes de CSS.
Dialogue: 0,0:03:09.65,0:03:13.48,Default,,0000,0000,0000,,Vamos a añadir un borde rojo a este "".
Dialogue: 0,0:03:13.48,0:03:15.28,Default,,0000,0000,0000,,Tecleamos "border:" y luego tenemos que
Dialogue: 0,0:03:15.28,0:03:16.94,Default,,0000,0000,0000,,especificar tres aspectos del borde:
Dialogue: 0,0:03:16.94,0:03:19.78,Default,,0000,0000,0000,,grosor, estilo y color. Para un borde
Dialogue: 0,0:03:19.78,0:03:23.47,Default,,0000,0000,0000,,delgado, sólo debo teclear "1px,", para una
Dialogue: 0,0:03:23.47,0:03:25.63,Default,,0000,0000,0000,,línea sólida nada extraordinaria, teclearemos
Dialogue: 0,0:03:25.64,0:03:28.97,Default,,0000,0000,0000,,"solid", y... para que sea roja
Dialogue: 0,0:03:28.97,0:03:31.65,Default,,0000,0000,0000,,voy a hacer que aparezca el selector de color RGB y
Dialogue: 0,0:03:31.65,0:03:37.77,Default,,0000,0000,0000,,seleccionar un bonito, rojo fuego. Ok. Igual que con
Dialogue: 0,0:03:37.77,0:03:39.92,Default,,0000,0000,0000,,el margen, podemos especificar el borde
Dialogue: 0,0:03:39.92,0:03:42.79,Default,,0000,0000,0000,,para sólo uno de los lados. Si queremos un
Dialogue: 0,0:03:42.80,0:03:46.08,Default,,0000,0000,0000,,borde morado y grueso en la parte superior,
Dialogue: 0,0:03:46.08,0:03:53.70,Default,,0000,0000,0000,,añadiremos otra propiedad: "border-top: 10px solid purple;"
Dialogue: 0,0:03:53.70,0:03:56.54,Default,,0000,0000,0000,,¡Genial! Ahora vamos a añadir
Dialogue: 0,0:03:56.54,0:03:59.78,Default,,0000,0000,0000,,un marco a la imagen, y vamos a jugar con
Dialogue: 0,0:03:59.78,0:04:02.22,Default,,0000,0000,0000,,los estilos de bordes. Así que vamos arriba
Dialogue: 0,0:04:02.22,0:04:07.60,Default,,0000,0000,0000,,a nuestro "cute-cat", y vamos a ver... "border: 6px,"
Dialogue: 0,0:04:07.60,0:04:12.08,Default,,0000,0000,0000,,vamos a probar con "groove red". Ok.
Dialogue: 0,0:04:12.08,0:04:16.40,Default,,0000,0000,0000,,No, no me gusta "groove", vamos a probar con "double",
Dialogue: 0,0:04:16.40,0:04:19.18,Default,,0000,0000,0000,,vamos a probar con "ridge". ¡Ajá! Ahora eso se ve como
Dialogue: 0,0:04:19.18,0:04:22.66,Default,,0000,0000,0000,,un marco. Ahora, ¿qué pasa con el borde que tenemos al rededor de
Dialogue: 0,0:04:22.66,0:04:25.98,Default,,0000,0000,0000,,nuestra Información Oficial? Vamos a ver, "border:",
Dialogue: 0,0:04:25.98,0:04:28.40,Default,,0000,0000,0000,,no lo vamos a hacer muy grande, "2px",
Dialogue: 0,0:04:28.40,0:04:31.18,Default,,0000,0000,0000,,vamos a probar "dotted" y luego, déjenme seleccionar...
Dialogue: 0,0:04:31.20,0:04:35.96,Default,,0000,0000,0000,,un gris delicado, déjenme probar
Dialogue: 0,0:04:35.96,0:04:39.65,Default,,0000,0000,0000,,con "dashed". Ok, esto es lo que quiero.
Dialogue: 0,0:04:39.65,0:04:40.96,Default,,0000,0000,0000,,Ahora con todos estos bordes,
Dialogue: 0,0:04:40.96,0:04:42.44,Default,,0000,0000,0000,,hay algo que me molesta un poco.
Dialogue: 0,0:04:42.44,0:04:45.79,Default,,0000,0000,0000,,En realidad, hay algo que me molesta mucho.
Dialogue: 0,0:04:45.79,0:04:50.61,Default,,0000,0000,0000,,¿Ven cómo el texto se está encimando en el borde de "container"?
Dialogue: 0,0:04:50.61,0:04:54.93,Default,,0000,0000,0000,,Y también ¿ven cómo se encima el texto de la Información Oficial?
Dialogue: 0,0:04:54.93,0:04:56.52,Default,,0000,0000,0000,,Eso se ve grotesco,
Dialogue: 0,0:04:56.52,0:04:59.19,Default,,0000,0000,0000,,y el texto se vuelve difícil de leer.
Dialogue: 0,0:04:59.19,0:05:02.20,Default,,0000,0000,0000,,Ahí es donde usamos el relleno (padding). Siempre que
Dialogue: 0,0:05:02.20,0:05:03.78,Default,,0000,0000,0000,,tus elementos tengan colores de fondo o
Dialogue: 0,0:05:03.78,0:05:05.39,Default,,0000,0000,0000,,bordes, querrás añadir relleno
Dialogue: 0,0:05:05.39,0:05:07.63,Default,,0000,0000,0000,,para poner un espacio entre
Dialogue: 0,0:05:07.63,0:05:10.09,Default,,0000,0000,0000,,el contenido y las orillas. Vamos a añadir
Dialogue: 0,0:05:10.11,0:05:13.30,Default,,0000,0000,0000,,relleno ("padding") en "container", vamos a poner
Dialogue: 0,0:05:13.32,0:05:17.98,Default,,0000,0000,0000,,15 pixeles alrededor de "container".
Dialogue: 0,0:05:17.99,0:05:21.24,Default,,0000,0000,0000,,Mucho mejor. Vamos a poner relleno
Dialogue: 0,0:05:21.24,0:05:23.37,Default,,0000,0000,0000,,en "official-info", veamos:
Dialogue: 0,0:05:23.37,0:05:27.38,Default,,0000,0000,0000,,"padding: 6px,", oh, hermoso.
Dialogue: 0,0:05:27.38,0:05:29.36,Default,,0000,0000,0000,,Ahora, no necesitamos añadir relleno a la imagen,
Dialogue: 0,0:05:29.36,0:05:31.00,Default,,0000,0000,0000,,porque las imágenes en realidad se ven bien
Dialogue: 0,0:05:31.01,0:05:33.44,Default,,0000,0000,0000,,dentro de marcos como éste.
Dialogue: 0,0:05:33.44,0:05:35.68,Default,,0000,0000,0000,,Y aquí lo tienen: el Modelo de Caja.
Dialogue: 0,0:05:35.68,0:05:38.36,Default,,0000,0000,0000,,Margen, borde y relleno. Usé valores grandes y
Dialogue: 0,0:05:38.36,0:05:40.39,Default,,0000,0000,0000,,colores brillantes para que lo pudieran apreciar,
Dialogue: 0,0:05:40.39,0:05:42.68,Default,,0000,0000,0000,,pero mi página se ve un poco cursi.
Dialogue: 0,0:05:42.68,0:05:45.14,Default,,0000,0000,0000,,Si quieres que tu página luzca pulcra y sofisticada
Dialogue: 0,0:05:45.14,0:05:47.91,Default,,0000,0000,0000,,prueba usando blancos y grises más sutiles.
Dialogue: 0,0:05:47.91,0:05:49.23,Default,,0000,0000,0000,,Y hagas lo que hagas,
Dialogue: 0,0:05:49.23,0:05:50.87,Default,,0000,0000,0000,,asegúrate de usar esas propiedades, porque
Dialogue: 0,0:05:50.87,0:05:53.40,Default,,0000,0000,0000,,eso tendrá grandes efectos en tu página, cómo
Dialogue: 0,0:05:53.40,0:05:54.91,Default,,0000,0000,0000,,se ve y se siente.