The CSS Model box is a rectangle consists of elements, such as padding, margin, width, height, and ofcourse the content.
Understanding the CSS Model box will help you control your website style and quickly understand other web developers CSS code.
The height and the width inside the CSS Model box define the height and width of an HTML Element, the Border defines the border around the padding and content, the padding clears an area around the content, padding is transparent, the margin affect how other content properties interacting with the CSS Model box.
The margin is unique in that it doesn't affect the size of the box itself.
When opening a web page, the browser's rendering engine represents each element as a rectangular box (The model box).
Understanding the CSS Model box is helpful, when using the developer tool (click F12 on chrome browser to open it)
When we create the height and width of an HTML element, we are not creating the full size of the element, but the content area, we should also add borders, margin and padding, the total width of the element in the example is 430 pixels: