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 <div>, <h1> to <h6> or <p>.

Inline elements on the other hand only take up as much space as they need, not causing a line break. <img>, <span> and <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.

Example:

HTML:
<img src="image.jpg" class="block-image" />

CSS:
.block-image {
  display: block;
}

The same also works in the other direction, changing a block into an inline element.