Humans love to arrange other humans' faces in grids. You find these galleries in school yearbooks, organizations' people pages, and social media. Making one yourself doesn't seem to require a lot of HTML or CSS, right? You might start with this div full of images:
The images are too big, so you size them down with CSS:
Probably no gallery should contain 23 identical faces. Imagine if this were your yearbook.
Suppose you want to center the images so they are in the middle of their container. Images are inline content, and you center inline content with text-align:
That looks like a pretty good gallery, so you're done. However, there's one odd feature of this gallery. There's some space between the columns and rows. Try getting rid of it by turning off any margin and padding.
Even when margin and padding are 0, the spacing is still visible. That's because the spacing is not part of the styling; it's actually in the content. There is whitespace between the images, and this whitespace coalesces down to a single space character. What happens if you remove the indentation?
That didn't work. Even linebreaks coalesce down to space characters. What if you remove all the whitespace?
The HTML is now an unmaintainable mess, but the space between columns does indeed disappear. (The space you may see between the rows can be removed using the line-height property.) Galleries do normally have some space separating the images, but this spacing should come from CSS, not from extraneous whitespace in the content. Surely the architects of the web don't expect us to remove all whitespace from the HTML?
There is good news. This stray whitespace is only significant in elements that use normal flow. If you use Flexbox, the stray whitespace is discarded:
But the images no longer wrap. Instead, they cause horizontal overflow. Perhaps this is not surprising, as Flexbox is marketed as a tool for controlling the flow only along one dimension. But Flexbox also offers a the flex-wrap property. If this property is set to wrap, it will push any elements that overflow their flex parent into a new flex parent that is placed on the cross axis:
Try adding some spacing back in using box properties. Try centering the images using Flexbox properties.