Each element in an HTML document is treated as a rectangular box by CSS. This is the default layout scheme and can be customized as per our requirements. The positioning of elements, their content, and their surrounding elements are done following the box model of CSS.
To begin with, let’s start with the layout of the box model as shown in the following image.
Source: w3.org
Content
This includes the actual data in the form of text, image or other media content. The width and height properties modify the dimensions of this box.
Padding
The space between the outer edge of the content and its border refers to padding. This box can be resized by the padding property. Edge-specific properties like padding-left, padding-bottom, etc. help in achieving custom spacing.
Border
The distance between the outer edge of the padding and the inner edge of the margin defines the border of an element. By default, its width is set to 0. The border property is used to define an element’s border. Individual edges can also be styled.
Margin
The space between an element’s box and its surrounding elements’ box is defined as margin. This is analogous to the page margin which is defined as the space between the edge of a page and its content. It is transparent in color, simulating properties of padding, except that it clears area outside the element’s border. Like padding, the individual edges can be defined to have a custom margin.
Example
Consider the following example −
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 25px;
padding: 35px;
width: 200px;
background-color: lightseagreen;
border: 20px dashed indianred;
}
</style>
</head>
<body>
<div>
Content demo box<br/>
</div>
</body>
</html>Output
This produces the following output −
Here, we have defined the size of the <div> element in its CSS specification. The total width of this element is 360px which is calculated as follows −
width + (left+right)padding + (left+right)border + (left+right)margin = 200 + (35+35) + (20+20) + (25+25) px = 360px
Although it may appear that margin and padding just add extraneous space and add up to the element’s total width, it has found various applications in making the webpage responsive. The box model helps to position the elements in a better way.
Example
The following examples illustrate the CSS box model −
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: auto;
padding: 35px;
width: 80px;
box-shadow: inset 0 0 22px indianred;
border-radius: 50%;
}
div > div {
padding: 0 0px 100px 0px;
border-radius: 3%;
box-shadow: inset 0 0 22px seagreen;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>Output
This gives the following output
Example
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
width: 350px;
display: flex;
float: left;
border: 6px solid black;
border-radius: 6%;
}
.d1 {
margin-left: 20px;
width: 150px;
height: 80px;
box-shadow: 0 0 0 4px mediumslateblue;
box-sizing: border-box;
border-radius: 36%;
}
.d2 {
width: 150px;
height: 80px;
padding: 30px;
box-shadow: 0 0 0 4px darkred;
box-sizing: border-box;
border-radius: 36%;
}
</style>
</head>
<body>
<div id="demo">
<div class="d1"></div>
<div class="d2"></div>
</div>
</body>
</html>Output
This gives the following output −
