Can someone explain to me why this solution fixed my problem?

So this was my problem (I didn’t post this) : inline - How to display <figure> images on same line HTML/CSS - Stack Overflow

This solution fixed my issue:

figure {
    width: 25%;
    float: left;
    margin: 0;
    text-align: center;
    padding: 0;
}

In the first place I don’t understand why it worked although it did.

Second of all, the images were next to each other as desired before I added the figure and figcaption elements. After they went vertical on me and nothing seemed to position them horizontally again. The only thing I could come up with is that the figure elements were considered a new block thus making the images vertical.

My css solution which didn’t work, although I don’t see why it didn’t was:

figure { 
    display: inline-block;
}

Thanks to anyone who can help!

Hi and welcome to the forums!

Unfortunately without seeing your code I can only speculate as to why these solutions did or did not work. Would you be able to please post your HTML and CSS using backticks to embed them in a code block like so:

<p>This is a code block</p>

So we can easily replicate what you have and give advice where possible!

Kept saying that I couldn’t upload more than one media link or something of that sort but here is the code without the (g) in jpg

<header><title>Nature shots by f43a97</title></header>

<body>
    <link href="stylesheet.css" rel="stylesheet"> </link>
    <div class="header">
    <h1>Nature shots</h1>
    <h5>By: f43a97</h5>
    </div>

        <h2 class="latest">My latest work</h2>
    

    <div class="images">
        <figure>
            <img src="images/pokebug.jp" alt="Pokebug" />
            <figcaption><em>Pokebug</em></figcaption>
        </figure>
        <figure>
        <img src="images/truckfly.jp" alt="Truckfly" />
        <figcaption><em>Straight chillin'</em></figcaption>
        </figure>
    </div>

    <div class="images">
        <figure>
        <img src="images/mural.jp"    alt="mural"  />
        <figcaption><em>Mural</em></figcaption>
        </figure>

        <figure> 
        <img src="images/capital.jp"  alt="Capital"  />
        <figcaption><em>Capital</em></figcaption>
        </figure>
    </div>

    <div class="images">
        <figure>
        <img src="images/river.jp"    alt="river"  />
        <figcaption><em>River</em></figcaption>
        </figure>

        <figure>
        <img src="images/bee.jp"  alt="bee"  />
        <figcaption><em>Bee</em></figcaption>

        </figure>
    </div>

</body>

Excellent thank you!

So to your first point, the reason that fix works is because float removes the element from the normal flow of the page, and float: left; specifies that it goes to the very left of the container. However float elements cannot overlap each other, therefore they line up side by side. This is where width: 25%; margin: 0; padding: 0; all come in. All margin and padding is removed so the width of the element is exactly whatever is declared for the width property. Then the width is set to 25%, meaning that 4 images fit perfectly side by side in the 100% width of the body. This should be clear if you change 25% to 20% and see that now 5 images fit perfectly side by side.

As for the images being vertical I’m afraid I’m not sure what you mean by that! Would you be able to upload a screenshot of what you see on the page to demonstrate this?