Inline vs. block-level elements: a demonstration

https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

by ud25tGNwMddCP7JI

HTML

<div>The following span is an <span class="highlight">inline element</span>;
  its background has been colored to display both the beginning and end of
  the inline element's influence.</div>
<hr>
<div>The following paragraph is a <p class="highlight">block-level element;</p>
  its background has been colored to display both the beginning and end of
  the block-level element's influence.</div>

CSS

.highlight {
  background-color: #ee3;
}

hr {
  background-color: red;
  height: 1px;
  border: 0;
}
/*hr { background-color: red; height: 1px; border: 0; }*/