What are the components of the CSS box model?

The CSS box model is used to represent an entity that encloses all of the HTML content into a box or a button element. There are four components:

  1. Border: Denotes the padding and content around the border
  2. Content: Refers to the actual content to be displayed
  3. Margin: Refers to the top layer of the box element
  4. Padding: Defines the empty space around the element