Block and Inline elements are a basic ingredient for each web layout. No matter if you use float layouts, Flexbox or CSS Grid, these always play a role.
A block element always uses the full width of the parent container. Good examples are
Inline elements on the other hand only take up as much space as they need, not causing a line break.
<a> are all inline elements.
Sometimes it comes in handy to override this though, for instance turning an
<img> into a
block element. For that, you add a class to the HTML element and set display: block for it in CSS.
<img src="image.jpg" class="block-image" />
The same also works in the other direction, changing a
block into an