What is CSS2 Box Model Example
The CSS box model is a container that contains multiple properties including borders, margin, 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 customising the layout or different elements. The web browser renders every element as a rectangular box according to the CSS box model.
Explanation of the different parts:
Content – The content of the box, where text and images appear
Padding – Clears an area around the content. The padding is transparent
Border – A border that goes around the padding and content
Margin – Clears an area outside the border. The margin is transparent
Example
Demonstration of the box model:
p {
width: 80px;
height: 70x;
margin: 0;
border: 2px solid black;
padding: 5px;
}
The total width for the element can be calculated us:
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
Example 1: This example illustrates the use of the CSS Box Model for aligning & displaying it properly.
HTML
<!DOCTYPE html>
<head>
<title>CSS Box Model </title>
<style>
.main {
font-size: 360x;
font-weight: bold;
Text-align: center;
}
.co {
margin-left: 60px;
border: 50px solid #009900;
width: 300px;
height: 200px;
text-align: center;
padding: 50px;
}
.co1 {
font-size: 42px;
font-weight: bold;
color: #009900;
margin-top: 60px;
backgroud-color: #c5c5db;
}
.co2 {
font-size: 18px;
font-weight: bold;
background-color: #c5c5db;
}
</style>
</head>
<body>
<div class="main">CSS BoX Model property </div>
<div class="co">
<div class="co1">CodeOne</div>
<div class="co2">
A computer science protal for code one
</div>
</div>
</body>
</html>
Output:
CSS Box Model Property
Example 2: This example illustrates the Box Model by implementing the various properties.
HTML
<!DOCTYPE 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">CodeOne</div>
</body>
</html>
Output:
CSS Box-Model property
