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.
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.
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)
Two boxes next to each other that margin-left to right are cumulative.
When two boxes that one element top on another element.
Let’s look following example and can see the different distance between heading and content.
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.