TIL — Using “Box Model” of Chrome Dev Tools

We all know how good is Chrome Dev Tools when it comes to the web debugging capabilities. There are number of features in the Dev Tools which are very useful but we are unaware of.

One such feature which I’ve discovered today is “Box Model”. So, what is it exactly?

“It’s a feature provided by Chrome Dev Tools which show us the visual representation of an element on the HTML page including margins, paddings and borders relative to the other elements.”

Basically it shows us the following things about the particular element:

As shown in the figure, it shows us the relative margins, paddings, borders through colors. So, everything is represented in different color. The main element being in blue, padding in green, border in brown color and so forth. It also shows the amount of padding/margins in terms of a number at every side. i.e Top, Bottom, Left and right.

Box Model Representations

In above image, as you can see, an element have 5px padding at every side, 1px of border and no margin on either side. One interesting thing about this Box Model is, you can actually modify any of the number right in it and can see the changes accordingly as shown below.

Box Model in Action

This comes really handy when we want to see the actual behavior of paddings and margins across the elements rather than just changing them in the CSS randomly.