Box model sample

Each div has a different background color. Except for background color, the style is the same as the preceeding div, but with one more rule added.

<div style="height: 50px; width: 150px; background-color: #fef886;">
  This is div 1.
</div>
<div style="height: 50px; width: 150px; background-color: #6ec6f1; border: 8px solid gray;">
  This is div 2.
</div>
<div style="height: 50px; width: 150px; background-color: #f0888a; border: 8px solid gray; margin: 16px;">
  This is div 3.
</div>
<div style="height: 50px; width: 150px; background-color: #bc7aac; border: 8px solid gray; margin: 16px; padding: 16px;">
  This is div 4.
</div>
      

div 1 has only the content box. The content box is the same size in each div.
div 2 has a border added around the content box.
div 3 has a margin added around the border.
div 4 has its content area. Around the content area is the padding. Around the padding is the border. Around the border is the margin.