Examples of Box models in CSS
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.
<!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">
w3wiki
</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.
<!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">w3wiki</div>
</body>
</html>
Output:
CSS Box model
CSS Box Model is a Fundamental concept in CSS that governs how elements are structured and positioned on a webpage. By learning this model, you’ll create elements visually appealing that adjust seamlessly to various screen sizes. It is used to create the design and layout of web pages.
In this article, we’ll learn the key components of the box model and its practical implications.
Contact Us