What is Box Model?

The CSS box model is a fundamental concept that describes how HTML elements are structured and sized by the browser's rendering engine

It is a conceptual "box" that wraps around every HTML element and consists of four main, concentric areas

• Content
• Padding
• Margin
• Border
• Box Sizing

Content

In the CSS box model, the content area is the innermost part of the box and holds the actual content of the HTML element.

Characteristics of the content area

• Dimensions: Its size is controlled by the CSS width and height properties
• Background: The element's background color or image fills the content area and extends behind the padding
• Default behavior: In the standard box model (box-sizing: content-box), the width and height properties explicitly set the size of the content area
• Alternate behavior: With box-sizing: border-box, the specified width and height include the padding and border

Learn More →