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.
- Content
- Padding
- Border
- 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:
- 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).
Visual Output:
This is a box model example.