1 00:00:00,560 --> 00:00:09,880 Bueno, pues ahora vamos a ver cómo configurar los márgenes y rellenos en una web, que es otra de las cosas que se hace mucho cuando se modifican las hojas de estilo. 2 00:00:11,060 --> 00:00:19,660 Vamos a hacer como estamos haciendo últimamente, partimos de nuestro brackets, con tal y como veis en pantalla. 3 00:00:22,230 --> 00:00:25,629 Un segundito, que no sé por qué no se ve la ventana del Chrome. 4 00:00:27,350 --> 00:00:28,289 Vale, ahí la veis. 5 00:00:28,289 --> 00:00:32,109 vale, entonces lo que vamos a hacer 6 00:00:32,109 --> 00:00:33,990 como estamos partiendo del último que hemos hecho 7 00:00:33,990 --> 00:00:35,750 que es el de borde, pues hacemos lo de siempre 8 00:00:35,750 --> 00:00:37,850 archivo, guardar como 9 00:00:37,850 --> 00:00:40,250 vale, y lo vamos 10 00:00:40,250 --> 00:00:42,090 a llamar márgenes 11 00:00:42,090 --> 00:00:45,130 barra baja 12 00:00:45,130 --> 00:00:47,289 relleno, punto html, vale 13 00:00:47,289 --> 00:00:51,000 y pues lo que vamos a hacer 14 00:00:51,000 --> 00:00:51,960 es que vamos a borrar 15 00:00:51,960 --> 00:00:54,240 toda la parte del body 16 00:00:54,240 --> 00:00:56,960 vale, y vamos a borrar 17 00:00:56,960 --> 00:00:58,939 todos los estilos menos 18 00:00:58,939 --> 00:01:01,020 lo que compete a 19 00:01:01,020 --> 00:01:03,420 HTML y BODY de la altura de la web 20 00:01:03,420 --> 00:01:05,099 y lo que tiene que ver con 21 00:01:05,099 --> 00:01:06,299 la fuente, vale 22 00:01:06,299 --> 00:01:10,689 y bueno, vamos a poner aquí 23 00:01:10,689 --> 00:01:12,510 por ejemplo una cabecera H1 24 00:01:12,510 --> 00:01:13,569 que la vamos a llamar 25 00:01:13,569 --> 00:01:16,489 márgenes y relleno en 26 00:01:16,489 --> 00:01:20,579 CSS, vale 27 00:01:20,579 --> 00:01:22,920 y el título aquí también vamos a 28 00:01:22,920 --> 00:01:23,799 cambiarle, vamos a poner 29 00:01:23,799 --> 00:01:25,879 márgenes y 30 00:01:25,879 --> 00:01:28,859 relleno en CSS, ahí 31 00:01:28,859 --> 00:01:31,000 vale, pues empezamos 32 00:01:31,000 --> 00:01:32,480 lo primero que vamos a hacer es 33 00:01:32,480 --> 00:01:36,959 Nos vamos a crear tres cajas contenedoras DIP, ¿vale? 34 00:01:38,239 --> 00:01:43,239 Cada caja va a tener una cabecera H2 y va a tener un párrafo Lorem Ipsum, ¿vale? 35 00:01:43,540 --> 00:01:47,560 Entonces, para hacer esto de forma automática vamos a hacer un atajo de M, ¿vale? 36 00:01:48,700 --> 00:01:53,659 Que seguramente ya muchos lo imaginaréis cómo será porque lo hemos estado haciendo un montón de veces, ¿vale? 37 00:01:54,379 --> 00:01:58,780 Como queremos hacer tres cajas de DIP, vamos a poner DIP por 3, ¿vale? 38 00:01:58,780 --> 00:02:12,060 Ahora, dentro de esa caja de DIP, ¿vale? De cada una de ellas, vamos a poner una cabecera de nivel H2, cuyo texto va a ser texto sin margen. 39 00:02:12,060 --> 00:02:28,180 Y además vamos a meter un párrafo, ¿vale? Y dentro de ese párrafo vamos a poner un texto Lorem Ipsum, ¿vale? Esto sería nuestro atajo Emmet, ¿vale? 40 00:02:28,180 --> 00:02:32,560 Entonces voy a copiar todo esto, lo pego aquí debajo, ¿vale? 41 00:02:33,000 --> 00:02:36,300 Y ahora le doy al tabulador, ¿vale? 42 00:02:36,460 --> 00:02:37,900 Y fijaros que sale eso. 43 00:02:39,080 --> 00:02:44,039 Y sobre este código voy a hacer un cambio, ¿vale? 44 00:02:44,039 --> 00:02:55,719 Y es que a este segundo div le voy a poner un id y lo vamos a llamar texto barra baja con barra baja margen, ¿vale? 45 00:02:55,919 --> 00:02:57,099 Le vamos a poner ese id. 46 00:02:57,099 --> 00:03:02,719 vale, pues que es lo primero que vamos a hacer 47 00:03:02,719 --> 00:03:05,159 lo primero que vamos a hacer es 48 00:03:05,159 --> 00:03:06,460 vamos a modificar 49 00:03:06,460 --> 00:03:09,400 vamos a poner a todos los elementos deep 50 00:03:09,400 --> 00:03:10,759 le vamos a poner un borde, vale 51 00:03:10,759 --> 00:03:12,219 entonces voy a poner deep 52 00:03:12,219 --> 00:03:13,819 y simplemente voy a poner 53 00:03:13,819 --> 00:03:16,400 la propiedad de atajo border, vale 54 00:03:16,400 --> 00:03:18,520 recuerdo que podemos poner border style 55 00:03:18,520 --> 00:03:20,300 border width, border color, vale 56 00:03:20,300 --> 00:03:21,879 pero yo voy a poner border que es más rápido 57 00:03:21,879 --> 00:03:26,439 de un pixel y sólido, vale 58 00:03:26,439 --> 00:03:34,479 Entonces, fijaros que ahora salen los tres elementos div uno consecutivamente del otro, ¿vale? 59 00:03:35,539 --> 00:03:44,099 Entonces, lo que vamos a hacer ahora es que vamos a modificar el elemento del medio, que es el elemento que hemos dicho que tiene un ID diferente, que se llama texto con márgenes. 60 00:03:44,099 --> 00:03:59,500 Entonces, pongo almohadilla, texto, barra baja con márgenes, ¿vale? Y ahora aquí dentro vamos a ver diferentes propiedades. Primero vamos a trabajar los márgenes. Para trabajar los márgenes la propiedad margin, ¿vale? 61 00:04:00,139 --> 00:04:04,020 Pero lo que vamos a poner es decir dónde queremos poner ese margen. 62 00:04:04,159 --> 00:04:06,520 Si yo lo quiero poner arriba, pues margin top, ¿vale? 63 00:04:06,919 --> 00:04:16,300 Fijaros, si yo pongo aquí ahora mismo 3em, ha habido o ha establecido un margen respecto al elemento superior, ¿vale? 64 00:04:16,540 --> 00:04:22,379 Si yo quiero establecer un margen con respecto al elemento inferior, pues pongo margin bottom, ¿vale? 65 00:04:22,540 --> 00:04:25,639 Y de la misma forma, pues pongo 2, 3em, ¿vale? 66 00:04:25,639 --> 00:04:49,329 Que quiero poner un margen lateral, por ejemplo, en el lado izquierdo, pues margin left, ¿vale? Y aquí pongo, pues, 10, ¿vale? Y de la misma forma para el lado derecho, perdón, margin right, ¿vale? Y aquí pongo, pues, 12, ¿vale? 67 00:04:49,329 --> 00:04:55,290 Y fijaros cómo cambia completamente la caja tal y como la teníamos anteriormente, ¿vale? 68 00:04:56,209 --> 00:05:01,050 ¿Qué pasa? Que con la propiedad margin pasa lo mismo que pasaba con la propiedad border, ¿vale? 69 00:05:01,290 --> 00:05:09,209 Y es que nosotros podemos utilizar una propiedad de atajo. Esa propiedad de atajo es poner simplemente margin, ¿vale? 70 00:05:09,209 --> 00:05:29,600 Y entonces, si yo pongo un margen 5M, lo que me establece es un margen de 5M, ¿vale? En cada uno de los lados, tanto superior e inferior como izquierda y derecha, ¿vale? Yo podría modificar cada uno de estos márgenes de forma individual utilizando esta propiedad. 71 00:05:29,600 --> 00:05:32,379 Si yo ahora aquí pongo 2M, ¿vale? 72 00:05:32,839 --> 00:05:36,439 O pongo 1M, os voy a poner una más grande para que se note más, ¿vale? 73 00:05:37,279 --> 00:05:37,720 10M. 74 00:05:38,519 --> 00:05:43,939 Fijaros que el 5 sería la superior e inferior y el 10 sería la izquierda y derecha, ¿vale? 75 00:05:44,160 --> 00:05:48,420 Si yo ahora aquí pongo otra vez 20M, ¿vale? 76 00:05:48,759 --> 00:05:53,240 El 5 sería el superior, el 10 sería la de los laterales y el 20 el de abajo. 77 00:05:53,240 --> 00:05:59,500 Y si yo ahora pongo aquí 1M, pues veis que la última que he puesto sería el margen izquierdo, ¿vale? 78 00:05:59,600 --> 00:06:16,470 Muy bien, yo en este caso voy a dejar 5M, ¿vale? O un poquito menos, quizás 3M, ¿vale? Muy bien, ahora vamos a ver el tema del relleno, para que entendamos qué es el relleno, ¿vale? 79 00:06:16,470 --> 00:06:23,529 El relleno, digamos que sería la distancia que hay entre el contenido y los bordes, ¿vale? 80 00:06:23,769 --> 00:06:25,370 Pero dentro del propio elemento. 81 00:06:26,170 --> 00:06:36,970 Para poner relleno, es con la propiedad padding, ¿vale? 82 00:06:38,470 --> 00:06:41,949 Y tiene el mismo criterio, padding top. 83 00:06:42,670 --> 00:06:45,769 Y yo pondría aquí, pues por ejemplo, 3M, ¿vale? 84 00:06:45,769 --> 00:07:02,709 Fijaros que ahora se ha separado el contenido del borde superior, ¿vale? Yo pondría padding-bottom, otros 3M, ¿eh? ¿Qué he puesto más? Ah, ahora. 85 00:07:02,709 --> 00:07:04,430 Padding button, ¿vale? 86 00:07:05,230 --> 00:07:07,069 Pondría padding left 87 00:07:07,069 --> 00:07:09,129 Y pondría 8M 88 00:07:09,129 --> 00:07:12,990 Y padding right 89 00:07:12,990 --> 00:07:14,870 Y pondría 2M 90 00:07:14,870 --> 00:07:16,029 ¿Vale? 91 00:07:17,509 --> 00:07:21,009 Y esto sigue el mismo criterio que seguía el margin 92 00:07:21,009 --> 00:07:23,269 Yo puedo directamente aquí venirme 93 00:07:23,269 --> 00:07:24,910 Y poner padding 94 00:07:24,910 --> 00:07:26,470 Únicamente padding 95 00:07:26,470 --> 00:07:29,529 Y pongo pues 15M 96 00:07:29,529 --> 00:07:30,290 ¿Vale? 97 00:07:31,370 --> 00:07:32,370 Por ejemplo 98 00:07:32,370 --> 00:07:35,750 ¿Vale? O 3,5M 99 00:07:35,750 --> 00:07:39,209 ¿Vale? Entonces así vemos 100 00:07:39,209 --> 00:07:40,509 la diferencia 101 00:07:40,509 --> 00:07:42,589 ¿Vale? 102 00:07:42,870 --> 00:07:44,610 Y ahora os voy a enseñar un truco 103 00:07:44,610 --> 00:07:46,889 para centrar elementos 104 00:07:46,889 --> 00:07:49,250 de una forma rápida 105 00:07:49,250 --> 00:07:51,370 ¿Vale? Porque con el margen 106 00:07:51,370 --> 00:07:53,189 nosotros podríamos hacer un centrado 107 00:07:53,189 --> 00:07:54,730 de ese elemento, pero 108 00:07:54,730 --> 00:07:57,149 lo podemos hacer, pero tendríamos que ir ajustando 109 00:07:57,149 --> 00:07:59,569 dimensiones y os voy a enseñar 110 00:07:59,569 --> 00:08:00,709 una forma de hacerlo rápido 111 00:08:00,709 --> 00:08:15,129 Vamos a poner dos saltos de línea aquí, ¿vale? Uno y otro, ¿vale? Y ahora vamos a crear un elemento dip y dentro una cabecera de nivel 2 que ponga centrar elementos, ¿vale? 112 00:08:15,129 --> 00:08:22,589 Y dentro de ese div vamos a poner un id que sea centrar, ¿vale? 113 00:08:23,089 --> 00:08:34,700 Y nos vamos a venir, vamos a modificar ese id centrar y lo que vamos a hacer en primer lugar es ponerle un tamaño, una anchura, ¿vale? 114 00:08:34,980 --> 00:08:37,460 Que va a ser de 400 píxeles. 115 00:08:38,399 --> 00:08:42,519 Le vamos a poner una altura también de 400 píxeles. 116 00:08:42,519 --> 00:08:50,679 Le vamos a poner un color de fondo que va a ser un verde, ¿vale? 117 00:08:55,470 --> 00:08:59,190 Le vamos a poner un color a la fuente que va a ser blanco, ¿vale? 118 00:08:59,690 --> 00:09:02,110 Blanco es todo a F, ¿vale? 119 00:09:03,889 --> 00:09:07,909 Y por último vamos a centrarlo y para centrarlo es muy fácil. 120 00:09:08,070 --> 00:09:12,889 Simplemente vamos a poner la propiedad margin y vamos a ponerla en auto, ¿vale? 121 00:09:12,889 --> 00:09:18,029 Entonces fijaros que ya sale el elemento automáticamente centrado 122 00:09:18,029 --> 00:09:22,230 Si vosotros aumentáis la ventana, la disminuís, hagáis lo que hagáis 123 00:09:22,230 --> 00:09:24,389 Siempre va a estar ese elemento ahí centrado, ¿vale? 124 00:09:26,230 --> 00:09:32,669 Bueno, pues espero que hayan quedado claros los conceptos de márgenes y de relleno 125 00:09:32,669 --> 00:09:35,629 Porque ya digo, lo vamos a utilizar un montón 126 00:09:35,629 --> 00:09:36,710 ¿Ok? 127 00:09:37,649 --> 00:09:39,429 Nos vemos en el siguiente...