Saltar al contenido principal
Codigo Heroe
Tarea anterior
Distribuciones complejas de componentes7/18
A la lista de tareas
  1. 1. Ancho y relleno de las tarjetas
  2. 2. Márgenes entre elementos flex
  3. 3. La propiedad align-items en flexbox
  4. 4. La dirección del eje principal
  5. 5. El orden visual con order
  6. 6. La propiedad align-self en flexbox
  7. 7. Márgenes y rellenos de los elementos flex
  8. 8. Prueba de una imagen más grande
  9. 9. Imágenes que se ajustan al contenedor
  10. 10. Una tarjeta con dos columnas
  11. 11. Una distribución asimétrica con tres columnas
  12. 12. Áreas de grid
  13. 13. Áreas que ocupan varias filas
  14. 14. Reglas de las áreas de grid
  15. 15. La propiedad align-self en grid
  16. 16. Ajustar el ancho de las columnas
  17. 17. La propiedad justify-self
  18. 18. Prueba de la tarjeta con más contenido
Siguiente tarea
  • Matriz de skills
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

Márgenes y rellenos de los elementos flex

Ya centramos el encabezado. Para que la tarjeta coincida con el diseño, solo falta ajustar los espacios.

El encabezado usa la etiqueta <h3> y la descripción usa <p>. El navegador les agrega márgenes verticales que no coinciden con los del diseño. Tendremos que cambiarlos.

Lima

Lima

Un toque ácido y un aroma único.

+ Agregar

Lima

Lima

Un toque ácido y un aroma único.

+ Agregar

Al definir los márgenes, recuerda que los de dos elementos flex adyacentes se suman.

Márgenes de elementos adyacentes

Para mantener las medidas del diseño sin confusiones, es habitual agregar márgenes en un solo lado de los elementos, siguiendo la dirección del flujo. Si los elementos están en una fila, se agrega margen derecho y se elimina del último:

Márgenes en un flujo horizontal

Si los elementos están en una columna, se agrega margen inferior. La excepción es el último elemento (por ejemplo, el pie de página), al que se agrega margen superior si hace falta:

Márgenes en un flujo vertical

Así, aunque cambies el orden de las secciones, no quedarán pegadas ni aparecerán espacios de más.

Los elementos de las tarjetas van de arriba hacia abajo. Agregaremos márgenes inferiores a todos salvo al enlace y pondremos en cero los márgenes superiores predeterminados del encabezado y el párrafo. Como el enlace es el último elemento, le agregaremos margen superior.

Diseño de la tarjeta

El enlace también necesita relleno en todos sus lados. En este caso es un elemento flex, así que sus márgenes y rellenos verticales funcionarán igual que los horizontales.

También podríamos distribuir los espacios de otra manera. Por ejemplo, agregar 15px de margen inferior al párrafo de descripción y no darle margen superior al enlace.

Pero si la descripción tuviera varios párrafos, quedarían separados por 15px. Es demasiado: ese espacio solo debe aparecer después del último párrafo. Por eso conviene repartirlo entre el margen del párrafo y el del enlace.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="carousel-decorative.css"> <link rel="stylesheet" href="style.css"> <title>Crea tu smoothie</title> </head> <body> <section class="carousel"> <h2>Crea tu smoothie</h2> <button class="arrow arrow-back" type="button"><span class="visually-hidden">Anterior</span></button> <ul class="cards-list"> <li class="card"> <h3 class="title">Mandarina</h3> <img class="image" src="img/mandarin.jpg" alt="Mandarina" width="120" height="120"> <p class="description">Sabor dulce e intenso con un toque ácido.</p> <a class="add-link" href="#">+ Agregar</a> </li> <li class="card current"> <h3 class="title">Lima</h3> <img class="image" src="img/lime.jpg" alt="Lima" width="150" height="150"> <p class="description">Un toque ácido y un aroma único.</p> <a class="add-link" href="#">+ Agregar</a> </li> <li class="card"> <h3 class="title">Fresa</h3> <img class="image" src="img/strawberry.jpg" alt="Fresa" width="120" height="120"> <p class="description">Suave aroma floral y sabor a verano.</p> <a class="add-link" href="#">+ Agregar</a> </li> </ul> <button class="arrow arrow-forward" type="button"><span class="visually-hidden">Siguiente</span></button> </section> </body> </html>
CSS
.cards-list { display: flex; align-items: center; margin: 0; padding: 0; } .card { display: flex; flex-direction: column; width: 120px; margin-right: 10px; padding: 15px; } .card:nth-child(3) { margin-right: 0; } .current { width: 150px; } .image { order: -1; } .title { align-self: center; }

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0
    1. Agrega un margen inferior de 15px a image.
    2. En title, pon en cero el margen superior y define un margen inferior de 10px.
    3. Crea una regla para la clase description. Pon en cero el margen superior y define un margen inferior de 5px.
    4. Crea una regla para la clase add-link. Define un margen superior de 10px y un relleno de 5px en todos los lados. Fíjate en que los espacios verticales también funcionan.
    Codigo Heroe

    © 2023-2026, codigoheroe.com