The CSS properties considers all the HTML element to be inside a box, whether be it a text, a url, a division or a paragraph.
Box Model
To understand the box model, open the example from the activities that we have created and inspect any html element as shown below:
 |
| Image 2.5.1 Box Model |
As we take the mouse pointer over any of the HTML element, a box will appear. To get more clarity on that click on computed, next to the styles in the web inspector, it shows the box model for the selected html element as below:
 |
| Image 2.5.2 Computed Box Model for H1 |
 |
| Image 2.5.3 Edges of a box model |
A box model has four edges:
- Content Edge
- Padding Edge
- Border Edge
- Margin Edge
1. Content Edge: The content edge defines the real content area. In our example, as in the image 2.5.2, the area highlighted by blue is the content area. The content area of a block element can be changed by properties like width, min-width, max-width, height, min-height and max-height.
2. Padding Edge: Padding edge defines the padding area of the HTML element. To understand padding edge, let us see what padding is -
Padding
This css property is used to give space around a HTML element i.e this property allows us to give space to the top, right, bottom and left sides of an element.
 |
| Image 2.5.4 Syntax of Padding |
Here, the values can be either in percentage or length i.e (pt, px, cm, em etc). These units are going to be covered in further topics. Right now, we will be using only px.
Now, open the example and give padding: 10px 20px 10px 20px to H1 tag as below:
 |
| Image 2.5.5 Padding Property |
 |
| Image 2.5.6 Computed Box Model with Padding Area |
Image 2.5.6 shows the top, right, bottom and left padding of the H1 element. The padding property of an element can be defined in below ways:
 |
| Image 2.5.7 Ways to Write Padding Property |
- Whenever we want different top, right, bottom and left padding we can specify it as padding: value1 value2 value3 value4
- If we want to give equal padding to an element we can write it as padding: value. For example: padding:10px gives 10px to the top, right, bottom and left padding
- If we want to give equal top-bottom and left-right padding we can write it as padding: value1 value2. Example: padding:10px 20px assigns 10px top-bottom padding and 20px left-right padding
Now, what if we want to give padding to only one of the sides? For that CSS has four properties: padding-top, padding-bottom, padding-right and padding-left.
3. Border Edge: Border edge of a HTML element defines the border area of that element. To understand this let us assign 2px block border to the H1 tag in this example and inspect it as shown below:
 |
| Image 2.5.8 Border Property |
 |
| Image 2.5.9 Border Edge in Computed Box Model |
4. Margin Edge: Margin edge defines the margin area of a HTML element. Now, let us see what a margin is -
Margin
Margin CSS property is used to provide space around the HTML elements outside border of the element. The margin of HTML element can be defined same as the padding element as shown below:
 |
| Image 2.5.10 Syntax and Ways to Define Margin Property |
Now, let us see how margin area in a box model looks like by giving margin: 10px 20px 10px 20px to the H1 element in the example.
 |
| Image 2.5.11 Margin Property of H1 |
 |
| Image 2.5.12 Margin Edge and Margin Area in Computed Box Model of H1 |
Note: The padding and margin given in this example can also be written as padding:10px 20px & margin: 10px 20px, as the top-bottom and left-right properties are same.
This is all about the box layout. Now, let us see what box-sizing means.
CSS Box Sizing
In the above example where we gave H1 padding, border and margin, it can be concluded that the actual width and height of an element is equal to the width of the content + padding + border and height of the content + padding + border respectively as shown below image:
 |
| Image 2.5.12 Actual Height of a Content |
Due to this, when we set height or width of any element, it appears bigger due to the padding and border. This can be managed by the box-sizing css property. The box-sizing property defines whether to include the padding and border inside the content width or outside based on the requirement.
The box sizing property can be either content-box or border-box. By default, the box-sizing is content-box, which adds padding to the given width and height of the element. Let us see what happens if we give 50px height and 200px width to H1.
 |
| Image 2.5.14 Box-sizing content-box |
When we take the mouse pointer over H1 in the web inspector, we can see width and height of the element as shown in the above image 2.5.14.
Let us change the box-sizing to border-box. The output would be as below:
 |
| Image 2.5.15 Box-sizing border-box |