We all know how good is Dev 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. Chrome Tools 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.

Different

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

TIL — Using “Box Model” of Chrome Dev Tools

Too Long; Didn't Read

Company Mentioned

Amit Merchant

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

TIL — Using “Box Model” of Chrome Dev Tools

Too Long; Didn't Read

Company Mentioned

Amit Merchant

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES