Puedes ver que si vemos el diseño tenemos este Border como un borde hacia una pequeña línea gris.
Eso lo vas a lograr.
Primero a quién anuncio cada uno de estos anuncios es el que lo tiene entonces cada uno de estos anuncios
es el que tiene este borde de aquí.
Por lo tanto aquí vamos a ponerle Border y existen diferentes propiedades para Border entonces ver que
todas estas son las propiedades de bordes son bastantes en realidad.
Vamos a ver solamente algunas lo puedes poner aquí por ejemplo Border estáel y le puedes poner por ejemplo
sólido eso quiere decir que sea una línea después Border color le puedes especificar un color yo ya
tengo definido el color no voy a pegar aquí o lo voy a colocar ve 5B 5B 5 eso va a ser un color gris
y finalmente vamos a colocar border with digamos un píxel.
Entonces si guardamos cambios y abrimos el proyecto y puede ser que nos genera un bordura ahora estar
escribiendo Border está el Border color y border with pues son tres propiedades que bien caben en una
sola que se conoce como porder.
Esta toma tres propiedades en el siguiente orden White que es el ancho está el color ahorita lo vemos
ahora muy importante es que le puedes poner por ejemplo aquí width digamos 10 pixeles usualmente yo
nunca le pongo tanto porque se ve muy feo en realidad y no nada más existe está el sol y existen muchos
en realidad existen detalles que a veces lo utilizo no mucho en realidad pero en algunos ejemplos si
se utiliza y voy a poner aquí porder está el puede ser que existen muchas opciones.
Otro que utilizo es Dutt son como puntitos y Dowell que son dos líneas puedes ver que no se ve porque
tiene que ser un poco más grueso este UE3 puedes ver que aparecen dos lineas 6 diferentes opciones que
le puedes pasar ahora como mencioné podemos utilizar Border este te permite tener estos tres en uno
solo entonces vamos a poner un pixel que era el ancho el tipo de esta él va a ser Solid como lo teníamos
anteriormente y este color aquí entonces este y tener los tres por separado es exactamente lo mismo
yo usualmente utilizo nada más este es mucho mejor pues el resultado es exactamente el mismo.
Ahora si abrimos el diseño puedes ver que tenemos un color de fondo y si recuerdas anteriormente vimos
que puedes aplicar Bagram y el color aquí iba a ser F5 F5 F5 que es un color gris no tan oscuro como
el borde y hace que se vea bastante bien.
Recuerda también puedes poner como Bagram color exactamente lo mismo lo que no puedes es ponerlo como
Veyron y manches eso no va a funcionar porque no es una imagen es un color entonces no hay color en
mi opinión creo que es mejor entonces se va viendo bastante bien ahora si vemos el diseño de nueva cuenta
puedes ver que tenemos como cierto espacio hacia adentro ya habíamos mencionado que eso se logra con
Padín es por eso que había creado o creé este tipo de contenido anuncio ponerlo aquí contenido anuncio
y colocar un par de digamos 20 pixeles que será igual a 2 Reem entonces si guardas cambios y abres tu
proyecto puedes ver que tenemos hacia adentro ya sé que será mejor porque si lo dejas así como pegada
de las orillas se ve mal.
No me gusta a mí entonces el Padín siempre poco Padín mejora un diseño y se ve bastante bien.
Ahora puedes ver que con lo que Padín de dos Reem eso debería de aplicar Padín en todas las direcciones
de dos Reem.
Pero si abrimos Dockers a inspeccionar puedes ver que esta parte en color verde si se ve el Pajines
aparte en verde se ve proporcional y son los dos Reem.
Ahora creo que no lo había explicado pero este Padín aplica los dos floema en todas las direcciones
podemos ver algún ejemplo aquí por ejemplo colocar si le pone espadín top 2 PADI Inlet 2 Rubem Padín
Riet 2 Reem y Padín bottom 2 RAAM Isofotón m y voy a guardar cambios abrimos el proyecto puedes ver
que si comento esta línea no hay ningún cambio.
Entonces tener estos 4 de aquí estos cuatro es exactamente lo mismo que tener este.
Esto es como la versión corta te ahorras muchas líneas y mucho código.
Usualmente se utiliza este salvo que tengas que aplicar el Padín únicamente en una dirección pues entonces
si se utiliza uno de estos ahora por ejemplo si quieres colocar Padín digamos en una dirección arriba
y abajo una cantidad y a los lados otra usualmente lo harías así.
Por ejemplo Padín top 2 y Lévi digamos 4 y 4 para que se vea mejor o para que se pueda ver.
Puedes ver que Kishi me posiciono se ve la franja en color verde un poco más grande entonces de nueva
cuenta voy a posicionarlos en el orden en que deben ir este debe ir aquí arriba y luego sigue el de
Boron y está aquí.
Entonces el Padín se va a ir aplicando cuando tienes esta forma igual primero la parte de arriba por
lo tanto sería Dorrit que será 4 Reem que sería este a la derecha y luego abajo 2 Reem y finalmente
a la derecha 4 Rubem.
Puedes ver que este y el otro son exactamente lo mismo solo habilitó o no puedes ver que no cambia nada
ahora de nueva cuenta igual que con los márgen si tienes dos valores iguales o mejor dicho si esteparia
este par son iguales puedes hacerlo de esta forma y queda más compacto y es exactamente lo mismo que
no cambia nada pero si lo requieres en todas las direcciones que sea igual seria de esta forma y puedes
ver que aplica el patín de dos Rubem en todas las direcciones.
Entonces es importante saber por qué hace PADI ahora puedes ver que como mencioné anteriormente la separación
que hay aquí es muy grande no y aquí es muy pequeña se aplica bien el paladín pero esa separación viene
por el H3 por default que viene siendo los H3 de nueva cuenta la hoja de estilos del navegador agrega
un margen.
Entonces tenemos que remover cielo para que no se vea tan grande puede ser que es una H3 lo tenemos
aquí contenido DAnnunzio para seleccionarlo y luego la etiqueta de nueva cuenta la misma técnica que
mostró anteriormente podemos ver que si se utiliza hay muchas personas que enseñan cosas que nunca utilizan.
Si se utiliza mucho a mí me cuesta mucho utilizarla o mejor dicho y por ejemplo puedes ver que también
cada párrafo tiene esa franja en color naranja esos también tienen un margen también se lo puedes remover.
Ahora puedes por ejemplo copiar este código de aquí y pegarlo y poner Lump y ponerle un margen cero
eso va a remover el margen y puedes ver que queda más junto al código queda más junto lo que es el texto
ahora puedes ver que aquí estoy repitiendo selectores algo que puedes hacer es cortar este aquí y ponerle
una coma aquí y pegarlo.
Eso va a ser eliminar esta parte que primero este selector.
Luego Koma a este otro selector le apliqué lo que viene siendo estas propiedades y puedes ver que funciona
correctamente.
Algunas personas les gusta ponerlas así es decidir hacia hacia el frente una tras otra qué le puedes
dar enter y no hay ningún problema.
No te preocupes sigue funcionando y puedes agregar múltiples Comas aquí y puedes ir agregando más estilos
para que se aplique el mismo el mismo CSS ahora tal vez digas bueno déjame buscar los demás márgenes.
A mi usualmente no me gusta estar mezclando mucho contenido arriba y abajo después se hace un poco más
complicado pues solamente agrupa de esta forma las que estén en esa pequeña porción de código es solamente
un consejo obviamente no es como que la ley lo que yo digo pero sí es lo que me ha permitido escribirse
Cs y HTML más fácil de mantener.
Puedes ver que aún falta mucho para finalizar estos cards.
Falta un poquito más de código así que en el siguiente vídeo vamos a finalizarlos.