The CSS box model is a container that contains multiple properties including borders, margins, padding, and the content itself. It is used to create the design and layout of web pages. It can be used as a toolkit for customizing the layout of different elements. The web browser renders every element as a rectangular box according to the CSS box model.
Box-Model has multiple properties in CSS. Some of them are given below:
- content: This contains the actual data in the form of text, images, or other media forms and it can be sized using the width & height property.
- padding: This property is used to create space around the element, inside any defined border.
- border: This property is used to cover the content & any padding, & also allows setting the style, color, and width of the border.
- margin: This property is used to create space around the element ie., around the border area.
The following figure illustrates the Box model in CSS.
- Content Area: This area consists of content like text, images, or other media content. It is bounded by the content edge and its dimensions are given by content-box width and height.
- Padding Area: It includes the element’s padding. This area is actually the space around the content area and within the border-box. Its dimensions are given by the width of the padding-box and the height of the padding-box.
- Border Area: It is the area between the box’s padding and margin. Its dimensions are given by the width and height of the border.
- Margin Area: This area consists of space between the border and the margin. The dimensions of the Margin area are the margin-box width and the margin-box height. It is useful to separate the element from its neighbors.
CSS Box Model Working
For setting the width & height properties of an element(for properly rendering the content in the browser), we need to understand the working of the CSS Box model.
While setting the width and height properties of an element with CSS, we have only set the width and height of the content area. We need to add padding, borders, and margins in order to calculate the full size of an element. Consider the below example.
p {
width: 80px;
height: 70px;
margin: 0;
border: 2px solid black;
padding: 5px;
}
The total width for the element can be calculated as:
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
The <p> element can have a total width of 94px.
Total width = 80px (width) + 10px (left padding + right padding) + 4px (left border + right border) + 0px (left margin + right margin) = 94px.
The total height for the element can be calculated as:
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
The <p> element can have a total height of 84px.
Total height = 70px (height) + 10px (top padding + bottom padding) + 4px (top border + bottom border) + 0px (top margin + bottom margin) = 84px.
Now, We have learned the working of the CSS Box Model in-depth and now we will see Box Model examples so that we can properly understand it.
Example 1: This example illustrates the use of the CSS Box model for aligning & displaying it properly.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Box Model</title>
<style>
.main {
font-size: 36px;
font-weight: bold;
Text-align: center;
}
.gfg {
margin-left: 60px;
border: 50px solid #009900;
width: 300px;
height: 200px;
text-align: center;
padding: 50px;
}
.gfg1 {
font-size: 42px;
font-weight: bold;
color: #009900;
margin-top: 60px;
background-color: #c5c5db;
}
.gfg2 {
font-size: 18px;
font-weight: bold;
background-color: #c5c5db;
}
</style>
</head>
<body>
<div class="main">
CSS Box-Model Property
</div>
<div class="gfg">
<div class="gfg1">
GeeksforGeeks
</div>
<div class="gfg2">
A computer science portal for geeks
</div>
</div>
</body>
</html>
|
Output:
Example 2: This example illustrates the Box Model by implementing the various properties.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.main {
font-size: 32px;
font-weight: bold;
text-align: center;
}
#box {
padding-top: 40px;
width: 400px;
height: 100px;
border: 50px solid green;
margin: 50px;
text-align: center;
font-size: 32px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="main">CSS Box-Model Property</div>
<div id="box">GeeksforGeeks</div>
</body>
</html>
|
Output:
Supported Browser:
- Google Chrome
- Internet Explorer
- Microsoft Edge
- Firefox
- Opera
- Safari
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
20 Jul, 2023
Like Article
Save Article