I am working on a page using HTML5 that needs to use 4 figure tags placed adjacent to each other in a horizontal line. Each figure tag comprises of an image which holds an icon 80X80px and underneath the image is a caption.

It looks something like below:

Problem: Using developer tools, when I hover over the figure tag, it shows the dimensions as 80px x 120 px which is fine taking the combination of icon+caption into account. However, what it's actually doing while rendering can be seen in the snapshot. It's occupying some additional space (the width is being shows as 80px but it's using more than that!) which pushes the adjacent figure further to the right than it needs to be. The code snippet looks like as under:

And the reason why the Inspector doesn't add the margin to the width when you look at the size, is that technically the margins are not part of the element; they're on the outside. (If you were to give it a padding, that would be added to the width.)