The components that can be depicted on the web page consist of one or more than one rectangular box.
A CSS box model serves as a container encompassing various elements like margins, borders, padding, and content. Its purpose is to shape the layout and appearance of a webpage, offering a toolkit to customize the arrangement of diverse parts. As per the CSS box model concept, each element is presented by the web browser as a rectangular prism.
The diagram below demonstrates how CSS attributes such as width, height, padding, border, and margin determine the amount of space an element will take up on a webpage.
The CSS box model contains the different properties in CSS. These are listed below.
- Border
- Margin
- Padding
- Content
Next, we will analyze each attribute thoroughly, one at a time.
Border Field
It represents the space located between the padding-box and the margin. Its dimensions are calculated based on the width and height of the element's boundary.
Margin Field
This portion encompasses the space from the perimeter to the outer border edge.
The dimension of the margin area matches the width and height of the margin box. It is advisable to maintain a clear distinction between the element and its adjacent nodes.
Padding Field
This particular field necessitates adding padding to the component. Essentially, this region refers to the area surrounding the subject matter and contained within the border-box. The dimensions of the padding box determine its size.
Content Field
Content like text, images, or other digital assets are integrated within this section.
It is limited by the boundary of the information, and its dimensions are determined by the width and height of the content container.
Elements of the width and height
Typically, setting the dimensions of an element using the CSS width and height properties defines the size of the content area within that element. The overall size of the containing box is influenced by various factors.
The precise region that an element box can occupy on a webpage is determined by the following measurement-
| Size of the box | Properties of CSS |
|---|---|
| Height | height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom |
| Width | width + padding-left + padding-right + border-left + border-right + margin-left + margin-right |
Example 1
Here, to illustrate the CSS box model, we have an example.
<!DOCTYPE html>
<head>
<title>CSS Box Model</title>
<style>
.main
{
font-size:30px;
font-weight:bold;
Text-align:center;
}
.C# Tutorial
{
margin-left:50px;
border:50px solid Purple;
width:300px;
height:200px;
text-align:center;
padding:50px;
}
.C# Tutorial1
{
font-size:40px;
font-weight:bold;
color:black;
margin-top:60px;
background-color:purple;
}
.C# Tutorial2
{
font-size:20px;
font-weight:bold;
background-color:white;
}
</style>
</head>
<body>
<div class = "main">CSS Box-Model Property</div>
<div class = "Hello World">
<div class = "C# Tutorial1">C# Tutorial</div>
<div class = "C# Tutorial2">A best portal for learn Technologies</div>
</div>
</body>
</html>
Output
Upon compiling the aforementioned code, the resulting output is as follows.
Example 2
Here, we additionally provide a visual representation to explain the CSS box model.
<!DOCTYPE html>
<head>
<style>
.main
{
font-size:30px;
font-weight:bold;
text-align:left;
}
#box
{
padding-top:30px;
width: 300px;
height: 100px;
border: 40px solid red;
margin: 30px;
text-align:center;
font-size:32px;
font-weight:bold;
}
</style>
</head>
<body>
<div class="main">CSS Box-Model Property</div>
<div id="box">C# Tutorial</div>
</body>
</html>
Output
After running the code, you receive the subsequent output:
In the C# Tutorial: Within the CSS box model, the content area of a box entity refers to the space where the initial content like images, text, videos, etc., is displayed. This area may also encompass descendant element boxes.