Definition:
CSS Box Model means a model that CSS takes for its box model, that is, for all elements, which CSS will take in the form of a box; it takes the same model, meaning it takes the same rectangular size box for all, whether you use the <div> tag or <p> etc.
In this way, it has defined four layers for its given box:
- 1. Content
- 2. Padding
- 3. Border
- 4. Margin
These layers join together to make a rectangular box around the content.
Syntax:
selector {
width: value; /* content width */
padding: value; /* space between content & border */
border: value; /* thickness and style of border */
margin: value; /* space outside the border */
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px; /* content width */
padding: 20px; /* space inside the box */
border: 2px solid black; /* border thickness & color */
margin: 15px; /* space outside the box */
background-color: lightblue; /* background color for visibility */
}
</style>
</head>
<body>
<div class="box">This is a box model example.</div>
</body>
</html>
Output:
After running this example in the browser, you will see:
- A light blue box with text inside.
- There’s 20px space between the text and the border (padding), a 2px solid black border around it,
- and 15px space outside the box (margin).