Understanding CSS Box Model

CSS Web Development Front End Technology

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 −

Live Demo

<!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 −

Live Demo

<!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

Live Demo

<!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>