What is Box Model in CSS?

In CSS, the term “box model” is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The CSS box model is a container that contains multiple properties including borders, margins, padding and content.

  • CONTENT: The content area consists of content like image, text, or other forms of media content. The height and width properties help to modify the box dimensions.
  • PADDING: The padding area is the space around the content area and within the border-box.
  • BORDER: The border area surrounds the padding and the content, and can be applied to all the sides of the box.
  • MARGIN: The margin area consists of space between the border and the margin.