Box Model

Box Model

The box model is a fundamental concept in CSS that defines the layout and sizing of elements on a web page. It consists of content, padding, border, and margin, and it helps determine how elements are spaced and sized.

Here’s an overview of the components of the box model:

• Content:
  • The innermost part of the box is the content, which holds the actual content of the element, such as text, images, or other media.

• Padding:
  • Padding is the space between the content and the element’s border. It is specified using the padding property and can be set individually for each side using padding-top, padding-right, padding-bottom, and padding-left.

• Border:
  • The border surrounds the padding, and it is specified using the border property. The border can have width, style, and color.

• Margin:
  • Margin is the space outside the border. It defines the spacing between the element’s border and its surrounding elements. Like padding, margin can be set individually for each side.

The following figure illustrates the Box Model in CSS