CSS: inline-block

masonry layout 

<figure>
	<img src="image.jpg">
	<figcaption>image title</figcaption>
</figure>

 

When setting the masonry layout, <img> and <figcaption> are separated when the content overflows to the next column. 
To prevent this, 

the outer section <figure> that surrounds <img> and <figcaption> should have this value:

display: inline-block

---

"Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements."

from:

https://www.w3schools.com/css/css_inline-block.asp