Box Model

This lesson discusses the box model in CSS and how it affects the layout of elements on a web page.

Box Model

The box model is a fundamental concept in CSS that defines how elements are displayed on the page. It consists of four parts: content, padding, border, and margin.

The box model consists of the following parts:

  1. Content - The content area is where the text and images of the element are displayed. The content area is defined by the width and height of the element.
  2. Padding - The padding area is the space between the content area and the border of the element. Padding is used to create space around the content.
  3. Border - The border area is the line that surrounds the padding and content of the element. The border is used to define the visual appearance of the element.
  4. Margin - The margin area is the space outside the border of the element. The margin is used to create space between elements.

Code Editor