In the art of web development, the primary objective of a website is to make it look neat and attractive. This objective can be achieved by web designers through styling. Cascading Style Sheet (CSS) is used to style HTML elements. It defines how these elements will appear on the web browser. The spacing between HTML elements is another critical matter because it should always be kept in mind that elements should be properly spaced from the other elements. When it comes to Web Designing and Layout, it is very important to understand CSS Box Model.
In CSS Box Model, an HTML element is considered to be a box. It means, when an elements is rendered on the web browser, it is wrapped by a box. This box has certain properties; Content, Padding, Border, Margin. CSS Box Model allows a designer to place a specific HTML element (content) in a box and set the content’s position with respect to box or set the box’ position with respect to other elements. Following image clearly defines the CSS Box Model.
Following are some major properties of a Box (CSS Box):
- Content: Content of an element (box) is an area where text appears.
- Padding: Padding is a space around the Content of an element (box). It is a space between the Content and Border.
- Border: Border wraps the Content and Padding of an element.
- Margin: Margin is a space around the Border of elements. It is space between Border and other HTML elements.
Here is an example that will clear the above four terms. For now, forget about the width, I’ll explain it later:
Now let’s see what is done here. As following figure shows the explanation of above example. Padding around the content is 20px on each side (left, right, top and bottom padding is 20px). Similarly Border on each side is 10px (left, right, top and bottom border is 10px). Margin around the border is 20px on each side (left, right, top and bottom margin is 20px).
Now, let’s discuss about the width and height of an element with respect to CSS Box Model. The total width of the box becomes as following:
Total Box Width = div Width
+ padding Width (left+right)
+ border Width (left+right)
+ margin Width (left+right)
Similarly, the total height can be calculated as:
Total Box Height = div Height
+ padding Height (top+bottom)
+ border Height (top+bottom)
+ margin Height (top+bottom)
The width of box in above example is:
Total Box Width = 250px + (20px+20px) + (10px+10px) + (20px+20px) = 350px
So, when you apply CSS Box Model, you should keep in mind about the width of an element and the space these elements would take. For example if you want to make a CSS Box of width 300px, then you should keep the other factors (content, padding, border and margin) in mind too. In this case, several boxes can be created, but let’s make a box as an example:
Note: Some people face issues with the CSS Box Model Implementation. Like view in the browser is not consistent. The view appears differently in different browser. To fix this issue, add <!DOCTYPE html> tag at the start of page (before <html> tag).