What is the difference between Margin, Border, and Padding?

A border that goes around the padding and content.
A mergin is the space around an element's border.
A padding is the space between an element's border and the element's content.

Let's check examples of the code and result!

{
    padding: 0%;
    margin: 0px;
    border-width: 20px;
  }

{
    padding: 0%;
    margin: 100px;
    border-width: 20px;
  }

 {
      padding: 20%;
      margin: 0px;
      border-width: 20px;
    }

{
      padding: 0%;
      margin: 0px;
     border-width: 50px;
    }