Skip to main content

CSS Box Model

The CSS box model is a fundamental concept that describes the rectangular boxes generated for elements in a web page.

CSS Box Model consists of 4 components:

  • Content: This is the actual data within the element, like text, images, or videos. You can control the size of the content area using CSS properties like width and height.
  • Padding: Padding adds space around the content, creating a buffer between the content and the border.
  • Border: The border surrounds the content and padding, and you can style it with properties like border-width, border-style, and border-color.
  • Margin: Margin is the outer area around the element, creating space between it and other elements on the page.
CSS Box Model Image

Box Sizing​

The box-sizing property determines how the width and height of the element are calculated:

  • content-box (default): The width and height apply only to the content box. Padding and border are added outside the width and height.
  • border-box: The width and height include the content, padding, and border, but not the margin.

Summary​

  • CSS Box Model is a concept that wraps around every HTML element. It consists of 4 parts: content, padding, borders, margins.
  • CSS box-sizing property defines how the width and height of an HTML element are calculated. There are two approaches: content-box and border-box;