March 8th, 2019 
Nilesh Chaurasia CSS Box Model Properties
CSS Box Model means that a group of 3 CSS Properties such as margin, padding and border. If you want box look and feel of an HTML Element than CSS Box Model is used.
CSS Box Model Examples
<!DOCTYPE html>
<html>
<head>
<style>
.first
{
border: 10px solid lightsalmon;
margin: 30px;
padding: 20px;
background-color: lightblue;
}
.second
{
background-color: darkcyan;
border: 1px solid grey;
}
</style>
</head>
<body>
<div class="second">
<div>
<p class="first">Lorem ipsum ute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div >
</body>
</html>
The above code shows how one can create Box Model look and feel for an HTML element.
Here dark-cyan color shows the margin, light-blue color shows the padding and light-salmon color shows border.
CSS Box Model Design
In the Box Model Design width is the most important design property, because the actual element width is calculated based on margin, padding and border sizes.
CSS Box Width Example
<!DOCTYPE html><html>
<html>
<head>
<style>
.first
{
width: 300px;
background-color: lightblue;
margin: 0;
}
.second
{
width: 300px;
background-color: lightblue;
padding: 0 20px;
border: 20px solid red;
margin: 0;
}
.third
{
width: 300px;
background-color: lightblue;
padding: 0 20px;
border: 20px solid red;
margin: 25px;
}
div
{
background-color: orange;
border: 1px solid white;
display: inline-block;
}
</style>
</head>
<body>
<div>
<p class="first">Lorem ipsum ute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
</div><br />
<div>
<p class="second">Lorem ipsum ute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proiden.</p>
</div><br />
<div>
<p class="third">Lorem ipsum ute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
</div>
</body>
</html>
The above code shows the CSS Box Width depends on the padding, border and margin.
The original width of the paragraph is equal to the sum of the content width, border width and margin width.
The above code’s Paragraph Width Calculation are as bellow.
Actual Width of Element = left margin + left border + left padding + width of Element + right padding + right border + right margin
Actual Width of Element For Paragraph First
Actual Width of Element = 0 + 0 + 0 + 300 + 0 + 0 + 0 = 300px
Actual Width of Element For Paragraph First
Actual Width of Element = 0 + 0 + 0 + 300 + 0 + 0 + 0 = 300px
Actual Width of Element For Paragraph Second
Actual Width of Element = 0 + 20 + 20 + 300 + 20 + 20 + 0 = 380px
Actual Width of Element For Paragraph Third
Actual Width of Element = 25 + 20 + 20 + 300 + 20 + 20 + 25 = 430px
Posted in 
Tags: 
