CSS Tutorial

CSS Box Model

The CSS Box Model is the foundation of layout design in CSS. Every HTML element is a box made up of 4 areas:

• Content – The actual content (text, images, etc.)
• Padding – Space between the content and the border
• Border – The border surrounding the padding (optional)
• Margin – Space outside the border between other elements

Visual Example

Box Model Layers

Example with Code

.box {
  width: 300px;
  padding: 20px;
  border: 2px solid #007BFF;
  margin: 20px;
  background-color: #f8f9fa;
}
    

Box-Sizing Property

box-sizing controls whether padding and border are included in the total width/height of the box.

.box {
  box-sizing: border-box;
}
    

This makes the total width and height stay as defined, even after adding padding or borders.