Understanding the Box Model

One of the fundamental concepts in CSS is the box model. If an element is visible, it will occupy a rectangular region of the page. This is known as the element's box. There are four parts to this box.

Two of the parts can be visible: the content and the border. Padding is the amount of space between the content and the border. The margin is the space between the border and the other elements.

An element can contain other elements. In this case, the parent element's context box is known as the child element's container.