CSS Box Model

The CSS Box Model explains how every HTML element is displayed as a rectangular box on a web page.

Each element consists of four main parts: Content, Padding, Border, and Margin.

CSS Box Model Diagram

Simple Explanation

Think of an HTML element like a box. The actual content is placed in the center. Padding creates space around the content. Border surrounds the padding. Margin creates space outside the border.

• Content: The actual text, image, or other element.
• Padding: Space between the content and border.
• Border: The visible boundary around the element.
• Margin: Space outside the border.

Code Example

.box {
    width: 240px;
    margin: 20px;
    border: 5px solid #2563eb;
    padding: 20px;
    background-color: #dbeafe;
}

Output

Box Model Order