CSS Box Model
CSS
The CSS box model is a fundamental concept in HTML where each element is represented as a rectangular box.
CSS Box Model.
➔ Each element is represented as a rectangular box with four layers: content, padding, border, and margin.
➔ This box model determines how elements are sized, spaced, and positioned on a webpage.
Components of the Box Model
| Name | Description |
|---|---|
| Content | The actual text, images, or other media contained within the box. |
| Padding | A transparent area of space around the content inside the border. |
| Border | A line that surrounds the padding and content area. |
| Margin | A transparent space outside the border, which is used to create distance between the border and other adjacent elements. |
div {
background-color: #d2d2d2;
width: 300px;
border: 15px solid #801070;
padding: 50px;
margin: 20px;
}
Standard box model (box-sizing: content-box):
➔ By default, the width and height properties only define the content area, without considering padding and borders.
➔ So the total space required for the element on the webpage is calculated in the following way.
Total Width = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right.
Total Height = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom.
Alternative box model (box-size: border-box):
➔ The box-sizing: border-box property helps change this default behavior.
➔ With this setting, the specified width and height already includes content, padding, and borders..
➔ So the total space required for the element on the webpage is calculated in the following way.
Total Width = width (includes content, padding, and border)
Total Height = height (includes content, padding, and border)
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Box Model Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<style>
div {
background-color: #d2d2d2;
width: 300px;
border: 15px solid #801070;
padding: 50px;
margin: 50px;
}
</style>
</head>
<body>
<h3>CSS Box Model Example</h3>
<p>Each element is represented as a rectangular box with four layers: content, padding, border, and margin. This box
model determines how elements are sized, spaced, and positioned on a webpage.</p>
<div>
<p>
➔ By default, the width and height properties only define the content area, without considering padding and
borders.<br>
➔ So the total space required for the element on the webpage is calculated in the following way.<br><br>
Total Width = width + padding-left(15) + padding-right(15) + border-left(50) + border-right(50) +
margin-left(50) + margin-right(50).<br><br>
Total Height = height + padding-top(15) + padding-bottom(15) + border-top(50) + border-bottom(50) +
margin-top(50) + margin-bottom(50).
</p>
</div>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.