CSS Box Model

The CSS box model defines a rectangular box in web page layout. This box consists of four components: content, padding, border, and margin. These components together determine the appearance and arrangement of the element.

Box Model Components

Content

Content refers to the actual HTML element contained within the box, such as text, https://coder-cafe.com/wp-content/uploads/2025/09/images, and videos. The size of the content is determined by the width and height attributes of the element itself.

Padding

Padding is the distance between the content and the border, and can be set using the padding property. Padding can be specified as a value in four directions: top, bottom, left, and right. You can also use abbreviations to set all four values simultaneously. For example, padding: 10px 20px 30px 40px; represents the top, right, bottom, and left padding, respectively.

Border

A border is a line surrounding the content and padding. It consists of three components: border-width, border-style, and border-color. Use the border property to set the border’s size, style, and color.

Margin

Margin is the distance between a box and other elements, and can be set using the margin property. Similar to padding, margin can be divided into four values: top, bottom, left, and right. Shorthand notations can also be used to set values in all four directions simultaneously.

Box Model Alignment

Standard Box Model

In the standard box model, the size of an element is determined by the width and height of its content, while padding, borders, and margins are applied outside the content box.

Quirky Box Model

In the weird box model, the size of an element is determined by the content box plus the padding, borders, and margins. In other words, the size of the content box is affected by padding, borders, and margins.

CSS Properties

box-sizing

The box-sizing property controls the box model type of an element and has two possible values:

content-box: Standard box model. The element’s size is determined by the width and height of the content box.
border-box: Weird box model. The element’s size is determined by the content box plus the sum of its padding, border, and margins.

.box {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid black;
margin: 20px;
box-sizing: border-box;
}

padding

The padding property is used to set the padding of an element. You can set values in four directions, or use a shortcut to set values in all four directions simultaneously.

.box {
padding: 10px; /* 10px padding on top, bottom, left, and right */ 
}

border

The border property sets the style, width, and color of an element’s border. It corresponds to three sub-properties: border-width, border-style, and border-color.

.box {
border: 2px dotted red; /* 2px width, dotted style, red color border */ 
}

margin

The margin property sets the outer margin of an element. Similar to padding, it can set values in four directions, or it can use a shortcut to set values in all four directions simultaneously.

.box {
margin: 20px; /* 20px margins on top, bottom, left, and right */ 
}

Example Demonstration

The following is a simple example to demonstrate the application of the CSS box model:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>CSS box model</title> 
<style> 
.box { 
width: 200px; 
height: 100px; 
padding: 10px; 
border: 2px solid black; 
margin: 20px; 
box-sizing: border-box; 
} 
</style> 
</head> 
<body> 
<div class="box"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</div> 
</body> 
</html>

In this example, we define a div element named box, setting its width to 200px, height to 100px, padding to 10px, border to 2px, margin to 20px, and the box model type to the weird box model. The content on the page will be wrapped in this box and displayed according to the set properties.

CSS box model