Different rendered results outside of freecodecamp (Flexbox photo gallery step 9)

HTML-CSS
1

Hello, I was working through step 9 of the flexbox course, and found that I have a different result when I run the code as a file on my computer or codepen.io then in the freecodecamp emulator.

Here is the html code in free code camp:

<!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>

With CSS:

 * {
  box-sizing: border-box;
}

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

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

I saved this code to my computer, and opened it in my browser (Firefox 131.0.2 on Linux Mint).
In the image below, the a) screenshot shows the result from FCC, no white between the blue and red borders. The b) screenshot shows the result from my browser, where you can see there is a space between the red and blue borders. The is also a space between the blue borders of adjacent images.

image
image935×487 98.6 KB

Why does it look different?

2

SOLVED!
In the saved code, I changed the display property of img to block.

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

This fixed the rendering in the browser to remove the extra space.

I think free code camp must set img{display:block} by default, but it isn’t in the CSS file so this should probably be fixed.

3

I have opened an issue on github:

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.