I'm currently building a webpage using HTML5 that requires the use of 4 figure tags positioned next to each other in a horizontal line. Each figure tag consists of an image with an icon sized at 80X80px, along with a caption below it.
Here's an example of what I'm trying to achieve:
Issue: When I inspect the figure tag using developer tools, the dimensions show as 80px x 120 px, which makes sense considering the icon and caption combination. However, during rendering, it seems to be taking up more space than intended (even though the width is specified as 80px), causing the adjacent figure to shift further right than necessary. The code snippet appears like this:
<div id="figureIcons">
<a href="" class="extLinks" target="_blank">
<figure class="icons">
<img class="linksIcons" src="icons/chrome_link.png" title="Website">
<figcaption><b>HomePage</b><br />(Website)</figcaption>
</figure>
</a>
<a href="" class="extLinks" target="_blank">
<figure class="icons">
<img class="linksIcons" src="icons/linkedin_link.png" title="LinkedIn Profile">
<figcaption><b>Profile</b><br />(LinkedIn)</figcaption>
</figure>
</a>
</div>The only CSS applied for this layout is:
figure.icons
{
position:relative;
float:left;
margin-top: 5px;
margin-left: 1px;
}This is the relevant CSS for the issue. Other assigned classes/IDs have not been utilized in the stylesheet yet.
What am I missing here? How can I correct this issue? I need to align 4 figures next to each other. Any help would be appreciated. Thank you!