The container class is the perfect class to use for all HTML container elements like:

<div>, <article>, <section>, <header>, <footer>, <form>, and more.

Block-level Elements

A block-level element always starts on a new line.

A block level element has a top and a bottom margin, whereas an inline element does not.

The <div> element is a block-level element.

Ex:

<div>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  <a href="#">Link</a>
</div>

If we style <div>, the entire <div> block will be affected, which is not good sometimes.

<style>
  div {
    background-color: yellow;
  }
</style>

One way of addressing this issue is to set different class for <div>.

<style>
  /* omit div to generalize all container that has product class will be affected. */
  .product {
    background-color: yellow;
  }
</style>

<!-- define a product class to this div container -->
<div class="product">
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  <a href="#">Link</a>
</div>

In-line Elements

An inline element does not start on a new line.

An inline element only takes up as much width as necessary.

If we want to highlight some words in the sentence without change to a new line, we can use in-line element, <span>.

<style>
  .highlight {
    background-color: yellow;
  }
</style>
<p>
  <div>
    <span class="highlight">Lorem</span> ipsum dolor, sit amet consectetur    adipisicing elit.
  </div>
</p>