All the elements of HTML are boxes. In CSS we use the term box model when we TALK about the designs and layouts of the HTML elements. The CSS box model consists of MARGINS, border, padding, and CONTENT.

• MARGIN: Area outside the border is called a margin (Also called as outer area keeping the border as reference). The property to use margin in CSS is ‘margin’ which is a shorthand property will give the mentioned space in all the four sides equally. 
• Border: The area that goes around the padding and content is called a border. The property to use the border in CSS is ‘border’ which is a shorthand will take the size of the border, the color of the border and type of the border as values sequentially.
• Padding: The area around the content is called padding (Also called as Inner area keeping the border as reference). The property to use padding in CSS is ‘padding’ which is a shorthand property will give the mentioned space in all the four sides equally.
• Content: It’s the actual content of the box model which contains text or image.

From the above figure, we can clearly understand that the element as a box and the meaning of all other PROPERTIES of a box model. It’s always important to know the meaning of all the properties and how they behave and where exactly they occupy the space to become a better CSS developer.