Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

CSS - Márgenes y relleno - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 22 de febrero de 2021 por Fernando M.

96 visualizaciones

Más información Transcripción

Descargar la transcripción

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. 00:00:00
Vamos a hacer como estamos haciendo últimamente, partimos de nuestro brackets, con tal y como veis en pantalla. 00:00:11
Un segundito, que no sé por qué no se ve la ventana del Chrome. 00:00:22
Vale, ahí la veis. 00:00:27
vale, entonces lo que vamos a hacer 00:00:28
como estamos partiendo del último que hemos hecho 00:00:32
que es el de borde, pues hacemos lo de siempre 00:00:33
archivo, guardar como 00:00:35
vale, y lo vamos 00:00:37
a llamar márgenes 00:00:40
barra baja 00:00:42
relleno, punto html, vale 00:00:45
y pues lo que vamos a hacer 00:00:47
es que vamos a borrar 00:00:51
toda la parte del body 00:00:51
vale, y vamos a borrar 00:00:54
todos los estilos menos 00:00:56
lo que compete a 00:00:58
HTML y BODY de la altura de la web 00:01:01
y lo que tiene que ver con 00:01:03
la fuente, vale 00:01:05
y bueno, vamos a poner aquí 00:01:06
por ejemplo una cabecera H1 00:01:10
que la vamos a llamar 00:01:12
márgenes y relleno en 00:01:13
CSS, vale 00:01:16
y el título aquí también vamos a 00:01:20
cambiarle, vamos a poner 00:01:22
márgenes y 00:01:23
relleno en CSS, ahí 00:01:25
vale, pues empezamos 00:01:28
lo primero que vamos a hacer es 00:01:31
Nos vamos a crear tres cajas contenedoras DIP, ¿vale? 00:01:32
Cada caja va a tener una cabecera H2 y va a tener un párrafo Lorem Ipsum, ¿vale? 00:01:38
Entonces, para hacer esto de forma automática vamos a hacer un atajo de M, ¿vale? 00:01:43
Que seguramente ya muchos lo imaginaréis cómo será porque lo hemos estado haciendo un montón de veces, ¿vale? 00:01:48
Como queremos hacer tres cajas de DIP, vamos a poner DIP por 3, ¿vale? 00:01:54
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. 00:01:58
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? 00:02:12
Entonces voy a copiar todo esto, lo pego aquí debajo, ¿vale? 00:02:28
Y ahora le doy al tabulador, ¿vale? 00:02:33
Y fijaros que sale eso. 00:02:36
Y sobre este código voy a hacer un cambio, ¿vale? 00:02:39
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? 00:02:44
Le vamos a poner ese id. 00:02:55
vale, pues que es lo primero que vamos a hacer 00:02:57
lo primero que vamos a hacer es 00:03:02
vamos a modificar 00:03:05
vamos a poner a todos los elementos deep 00:03:06
le vamos a poner un borde, vale 00:03:09
entonces voy a poner deep 00:03:10
y simplemente voy a poner 00:03:12
la propiedad de atajo border, vale 00:03:13
recuerdo que podemos poner border style 00:03:16
border width, border color, vale 00:03:18
pero yo voy a poner border que es más rápido 00:03:20
de un pixel y sólido, vale 00:03:21
Entonces, fijaros que ahora salen los tres elementos div uno consecutivamente del otro, ¿vale? 00:03:26
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. 00:03:35
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? 00:03:44
Pero lo que vamos a poner es decir dónde queremos poner ese margen. 00:04:00
Si yo lo quiero poner arriba, pues margin top, ¿vale? 00:04:04
Fijaros, si yo pongo aquí ahora mismo 3em, ha habido o ha establecido un margen respecto al elemento superior, ¿vale? 00:04:06
Si yo quiero establecer un margen con respecto al elemento inferior, pues pongo margin bottom, ¿vale? 00:04:16
Y de la misma forma, pues pongo 2, 3em, ¿vale? 00:04:22
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? 00:04:25
Y fijaros cómo cambia completamente la caja tal y como la teníamos anteriormente, ¿vale? 00:04:49
¿Qué pasa? Que con la propiedad margin pasa lo mismo que pasaba con la propiedad border, ¿vale? 00:04:56
Y es que nosotros podemos utilizar una propiedad de atajo. Esa propiedad de atajo es poner simplemente margin, ¿vale? 00:05:01
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. 00:05:09
Si yo ahora aquí pongo 2M, ¿vale? 00:05:29
O pongo 1M, os voy a poner una más grande para que se note más, ¿vale? 00:05:32
10M. 00:05:37
Fijaros que el 5 sería la superior e inferior y el 10 sería la izquierda y derecha, ¿vale? 00:05:38
Si yo ahora aquí pongo otra vez 20M, ¿vale? 00:05:44
El 5 sería el superior, el 10 sería la de los laterales y el 20 el de abajo. 00:05:48
Y si yo ahora pongo aquí 1M, pues veis que la última que he puesto sería el margen izquierdo, ¿vale? 00:05:53
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? 00:05:59
El relleno, digamos que sería la distancia que hay entre el contenido y los bordes, ¿vale? 00:06:16
Pero dentro del propio elemento. 00:06:23
Para poner relleno, es con la propiedad padding, ¿vale? 00:06:26
Y tiene el mismo criterio, padding top. 00:06:38
Y yo pondría aquí, pues por ejemplo, 3M, ¿vale? 00:06:42
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. 00:06:45
Padding button, ¿vale? 00:07:02
Pondría padding left 00:07:05
Y pondría 8M 00:07:07
Y padding right 00:07:09
Y pondría 2M 00:07:12
¿Vale? 00:07:14
Y esto sigue el mismo criterio que seguía el margin 00:07:17
Yo puedo directamente aquí venirme 00:07:21
Y poner padding 00:07:23
Únicamente padding 00:07:24
Y pongo pues 15M 00:07:26
¿Vale? 00:07:29
Por ejemplo 00:07:31
¿Vale? O 3,5M 00:07:32
¿Vale? Entonces así vemos 00:07:35
la diferencia 00:07:39
¿Vale? 00:07:40
Y ahora os voy a enseñar un truco 00:07:42
para centrar elementos 00:07:44
de una forma rápida 00:07:46
¿Vale? Porque con el margen 00:07:49
nosotros podríamos hacer un centrado 00:07:51
de ese elemento, pero 00:07:53
lo podemos hacer, pero tendríamos que ir ajustando 00:07:54
dimensiones y os voy a enseñar 00:07:57
una forma de hacerlo rápido 00:07:59
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? 00:08:00
Y dentro de ese div vamos a poner un id que sea centrar, ¿vale? 00:08:15
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? 00:08:23
Que va a ser de 400 píxeles. 00:08:34
Le vamos a poner una altura también de 400 píxeles. 00:08:38
Le vamos a poner un color de fondo que va a ser un verde, ¿vale? 00:08:42
Le vamos a poner un color a la fuente que va a ser blanco, ¿vale? 00:08:55
Blanco es todo a F, ¿vale? 00:08:59
Y por último vamos a centrarlo y para centrarlo es muy fácil. 00:09:03
Simplemente vamos a poner la propiedad margin y vamos a ponerla en auto, ¿vale? 00:09:08
Entonces fijaros que ya sale el elemento automáticamente centrado 00:09:12
Si vosotros aumentáis la ventana, la disminuís, hagáis lo que hagáis 00:09:18
Siempre va a estar ese elemento ahí centrado, ¿vale? 00:09:22
Bueno, pues espero que hayan quedado claros los conceptos de márgenes y de relleno 00:09:26
Porque ya digo, lo vamos a utilizar un montón 00:09:32
¿Ok? 00:09:35
Nos vemos en el siguiente... 00:09:37
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
96
Fecha:
22 de febrero de 2021 - 21:29
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
09′ 39″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
29.80 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid