Aprende CSS Flexbox construyendo una galería de fotos - Paso 8

Español HTML-CSS
1

Tell us what’s happening:

Describe tu problema en detalle aquí.
no se que hacer despues de este paso serviria de ayuda si me dicen gracias soy nuevo, en la parte de css me pide lo siguiente : Notice how the blue image border extends beyond the red gallery border. This is due to the way browsers calculate the size of container elements.

The box-sizing property is used to set this behavior. By default, the content-box model is used. With this model, when an element has a specific width, that width is calculated based only on the element’s content. Padding and border values get added to the total width, so the element grows to accommodate these values.

Try setting box-sizing to content-box explicitly, with the global * selector. At this point, you will not see any changes, because you are using the default value.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Photo Gallery</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <header class="header">
      <h1>css flexbox photo gallery</h1>
    </header>
    <div class="gallery">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
    </div>
  </body>
</html>

/* file: styles.css */

/* User Editable Region */



/* User Editable Region */


.gallery {
  border: 5px solid red;
  width: 50%;
}

img {
  width: 100%;
  border: 5px solid blue;
  padding: 5px;
}

Your browser information:

El agente de usuario es: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Challenge Information:

Aprende CSS Flexbox construyendo una galería de fotos - Paso 8

2

La explicación básicamente nos explica por qué, por defecto, los bordes no están alineados.
Imagina que el cuadro rojo es el marco de la foto, y el cuadro azul y el gato son la foto, puedes ver como la imagen del gato junto y su cuadro azul, se salen del cuadro rojo, tu foto es más grande que tu marco.
image
Ahora, las instrucciones nos piden.

Try setting box-sizing to content-box explicitly, with the global * selector

Usar la propiedad box-sizing, con el valor content-box dentro del selector global *

1 Like
3

Las palabras claves son:
property and selector.

Asi que si tenemos el siguiente ejemplo:

* {
  color: green;
}

* es el global (universal) selector
color es la property
green es valor de la property color.

Piensas que puedes hacer lo mismo ahora con
box-sizing property y el valor contenxt-box?

2 Likes