In web development, the CSS box model refers to how HTML elements are modelled in the browser. In HTML every element is considered a box. There more to that box than just content that the element wraps around. It consists of margins, borders, padding, and the actual content.

The box model makes up the HTML box as well as shows how to box components affect the layout and how the width and height of the box are calculated.

CSS Box Model components

Content- The content of the box, where text and images appear.

Padding- A transparent area that clears the area around the content.

Border- A border goes around the content and padding.

Margin- An transparent area outside of the border.

CSS Box Model

calculate the height and width of the element

Total width=200px(width)+ 10px(left padding)+5px(letf border)+0px(left margin)+0px(right margin)+5px(right border)+10px(right padding)

Like this Total height can be calculated.

Total height=220px(height)+ 10px(top padding)+5px(top border)+0px(top margin)+0px(bottom margin)+5px(bottom border)+10px(bottom padding)

CUMULATIVE MARGINS

Two boxes next to each other that margin-left to right are cumulative.

cumulative marginal will be 90 pixels that 40 pixels plus 50 pixels.

When two boxes that one element top on another element.

cumulative marginal will be 30pixels collapse larger marginal

Let’s look following example and can see the different distance between heading and content.

marginal top=0px marginal botttom=30px cumulative marginal=30px
marginal top=20px marginal botttom=30px cumulative marginal=30px
marginal top=50px marginal botttom=30px cumulative marginal=50px

CONCLUSION

Really, the box model is this very essential topic to understand CSS and as well as CSS layouts. The truth of the matter is, all the modern frameworks like bootstrap and others use the box, border as their sizing mode. And also mention about cumulative and collapsing margins. Horizontal margins are cumulative, and for the most part, in most circumstances, the vertical ones collapse.

Thank you!!!

Undergraduate at Faculty of Information Technology University of Moratuwa