1
00:00:06,509 --> 00:00:15,269
Hemos pasado a 130, vamos a ponerlo para que se vea más caro marcado, vamos a poner 300, en vez de los 80.

2
00:00:15,929 --> 00:00:30,829
Lo guardamos, si veis, ¿veis cómo ha aumentado el margen exterior?

3
00:00:31,489 --> 00:00:43,420
Si lo ponemos ahora en 80, que era lo que tenía, y le damos a guardar, vemos que se modifica.

4
00:00:44,039 --> 00:00:45,500
¿Qué tenemos en cuanto al padding?

5
00:00:45,500 --> 00:00:52,000
El padding, lo habíamos visto, el padding era el margen interno entre el borde y el contenido.

6
00:00:52,859 --> 00:00:56,640
Ahora nos vamos a nuestro padding.

7
00:00:57,100 --> 00:01:01,479
Hemos dicho que el padding top es de 30, el padding bottom es de 20,

8
00:01:02,179 --> 00:01:08,920
que el color de fondo va a ser ese color blanco y que el padding izquierdo va a ser de 30 píxeles.

9
00:01:09,420 --> 00:01:13,980
Bien, yo puedo modificar el padding, sería lo que hay desde el contenido hasta aquí.

10
00:01:13,980 --> 00:01:20,000
hasta aquí y hasta aquí y luego abajo. Entonces, veis que el fondo, el background es de color

11
00:01:20,000 --> 00:01:26,739
blanco, pero vamos a cambiar el padding, por ejemplo, el top, vamos a cambiar el left para

12
00:01:26,739 --> 00:01:36,280
que se vea marcado y vamos a ponerle a 100. Al cambiarle el padding, si nos vamos a la

13
00:01:36,280 --> 00:01:43,099
página, le damos a actualizar, veis que ese padding izquierdo está modificándose, lo

14
00:01:43,099 --> 00:01:56,659
Lo cual hace que se reduzca el padding derecho, porque es lo único que hemos añadido. Al no añadir el padding derecho, el padding izquierdo modifica por defecto el padding derecho.

15
00:01:56,659 --> 00:02:13,300
Lo colocamos en como estaba y tendríamos que, entonces, en resumen, constant form o lo que es todo el div que englobaba todo el formulario estaría formado por todas estas propiedades.

16
00:02:13,300 --> 00:02:34,599
Y repaso, que el borde radius se refiere, que no lo he explicado, se refiere pues a cómo en el borde, cómo se redondea esto. Si yo modifico, bueno, antes de hacerlo, vamos a guardarlo y lo vamos a actualizar.

17
00:02:34,599 --> 00:02:40,300
entonces, vamos al resumen, hemos dicho que de aquí a aquí sería el padding

18
00:02:40,300 --> 00:02:44,099
que serían todas las propiedades del padding y que la parte externa

19
00:02:44,099 --> 00:02:48,460
de aquí a aquí sería el margin, luego hemos visto que la amplitud

20
00:02:48,460 --> 00:02:52,000
del formulario que se ve afectado sería esta de aquí a aquí

21
00:02:52,000 --> 00:02:54,280
los 470 píxeles y que

22
00:02:54,280 --> 00:03:00,159
estábamos con el borde de radios que sería de 10 píxeles, que sería el redondeo

23
00:03:00,159 --> 00:03:04,520
de aquí, si yo le aumento el redondeo, le pongo a 50

24
00:03:04,520 --> 00:03:08,599
veréis que no lo deja más redondeado, no lo deja tan cuadrado

25
00:03:08,599 --> 00:03:12,759
como aparece actualmente. Al darle a actualizar veis que te lo redondea

26
00:03:12,759 --> 00:03:15,719
más. En cuanto a todas las demás propiedades

27
00:03:15,719 --> 00:03:22,560
de, por ejemplo, del input, si veis casi todo

28
00:03:22,560 --> 00:03:26,539
es lo mismo. El input, cada uno de los inputs

29
00:03:26,539 --> 00:03:30,060
que tenemos, todos, tanto los input text como

30
00:03:30,060 --> 00:03:37,580
input text area, input email, tel, etc., pues van a tener todas estas propiedades de valor.

31
00:03:37,840 --> 00:03:41,719
Estas propiedades de valor nos están diciendo que el color de fondo va a ser blanco, que

32
00:03:41,719 --> 00:03:48,240
la amplitud va a ser de 408 píxeles y la altura de 40 píxeles, y que el radio va a

33
00:03:48,240 --> 00:03:54,099
ser 5 píxeles, no es muy marcado, si lo vemos aquí, el radio, veis, no es muy marcado en

34
00:03:54,099 --> 00:04:05,759
cuanto a cada uno de los inputs, nos está diciendo también que el estilo del borde

35
00:04:05,759 --> 00:04:13,939
va a ser un estilo sólido, como el que veis aquí, que el color del borde va a ser este

36
00:04:13,939 --> 00:04:19,100
color rosa, que es el que aparece, y luego el margin y el padding, como hemos visto anteriormente,

37
00:04:19,100 --> 00:04:34,019
Este sería, pues, el de aquí a aquí, sería, pues, el, como veis aquí, sería, pues, el margin, el exterior, aquí, aquí, y de aquí a aquí sería el padding, ¿vale?

38
00:04:34,620 --> 00:04:48,339
¿Veis? Margin era la parte externa, que era de aquí a aquí, y padding de aquí a aquí, ¿vale?

39
00:04:48,339 --> 00:05:11,680
Y poco más en cuanto al ejemplo que acabo de poner. El resto de componentes son muy parecidos, también le aplica un estilo al botón, pero todos son muy parecidos a los que acabo de indicar.

40
00:05:11,680 --> 00:05:21,740
Y este sería pues el ejemplo de un formulario completo y sencillo. Y nada más, nos vemos en los siguientes tutoriales.