CSS Box Model Tutorial

CSS is an excellent tool for front end web design. The popularity is not only with the ease of use but also with its robust functionalities. CSS affects each single element on a webpage. Therefore, every web designer being a core developer to simple layout designer should know the basics of CSS. Box model in CSS is the base for defining layouts and positioning of elements on a page. In this article we will explore the basics of CSS box model in detail. In addition, we will also cover how to analyze an element’s box model in a browser.

What is CSS Box Model?

When using CSS, each HTML element on a webpage is considered as a rectangular box. Hence the concept is referred as box model. This helps to easily define the layout of a web page and position the elements to align as you need. In box model the content of a HTML element is positioned in center and followed by padding, border and margin as shown below:

• Margin – this is the area around the border and is always transparent. The purpose of the margin is to provide necessary space between elements and from the edges of the browser.
• Border – this is a visible line around the content and padding area. Generally it is used to provide an outline to an element and can have any color and width.
• Padding – space between the actual content and the border is referred as padding. When the content has visible border lines, it is appropriate to have some padding. This will help to create space between the content and border.
• Content – actual content like text and image between HTML tags.

Also, learn about using CSS units to arrange layout elements.

Example of Box Model Element

Let us do a simple example of creating a paragraph within div tags to explain the box model concept. The CSS should look like below:

<style>
.box-model {
margin: 30px 5px 5px 15px;
padding: 10px 0 10px 5px;
border: 10px solid red;
text-align: justify;
}
</style>

Note that the CSS code for margin and padding contains dimensions for top, left, bottom and right respectively.

And the HTML to insert the content with the above css is:

<div class="box-model">
<p>This is a test content to explain how CSS box model will look like. This is a paragraph with 
different padding, different margin and border of 10px.</p>
</div>

The output of the above code will look like below on the browser. As mentioned, the margin can’t be seen as it is transparent.

How to Check CSS Box Model on a Browser?

It is a good idea to see the theory in a practical manner. You can see the CSS box model of an element right from your web browser. Here, we show the screenshot with Google Chrome browser. The method remains same for all other browsers like Firefox, Edge and Safari.

• Open any web page and right click on the element you want to explore.
• You can right click on any text, image, video or blank space.
• Choose “Inspect Element” option to open the developer console.
• It has a left pane for viewing HTML and right pane for viewing CSS.
• You can see the CSS box model of the chosen element under “Layout” tab of right pane.
• Referring the above example code – all borders, margins and paddings will match with the exact dimensions as defined in the CSS.

Note, you can view the HTML markup of an element in Google Chrome browser under “Elements” tab. The corresponding CSS and box model can be seen under “Styles” tab as shown in the below picture.

Calculating Width and Height of an Element in CSS Box Model

Now that you have understood the concept of CSS box model. Whenever defining height and width of an element, the total width and total height of that element should include margin, padding and border width. Let us add height and width to the above CSS code example:

<style>
.box-model {
margin: 30px 5px 5px 15px;
padding: 10px 0 10px 5px;
border: 10px solid red;
text-align: justify;
width: 300px;
height: 200px;
}
</style>

Now any element that calls the style of CSS class “box-model” should be positioned with the following total width and total height.

• Total Height = Height + Top Margin + Bottom Margin + Top Padding + Bottom Padding + Border Width = 200 + 30 + 5 + 10 + 10 + 10 = 265px.
• Total Width = Width + Left Margin + Right Margin + Left Padding + Right Padding + Border Width = 300 + 15 + 5 + 0 + 5 + 10 = 335px.

The complete page layout will be designed by considering the total width and total height dimensions of each element.