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.
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.
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.
Create your free account to unlock your custom reading experience.