CSS Box Model
In HTML,every element is contained in a box irrespective of their display either block or inline. And every box has its properties.So, CSS box model helps us to visualize the element box and margin, padding, border and content associated with it.
CSS box model is divided into 4 layers,let's go through each layer from inner-most to outer-most one by one. [C P B M]
Content (C): It is the part of CSS box model that is defined with an HTML element,it may contain media files for text. It is the inner-most layer of CSS box model.
Padding (P): This is the second layer of CSS box model. It describes how much space is between content and border. It's units are px, rem, vw, vh, em.
Border (B): This is the third outer-most layer of CSS box model. It describes about the properties of border that is associated with the HTML element. It cover-ups padding and content in it. It's units are the same as padding.
Margin (M): It is the outer-most layer of CSS box model. It describes the space between browser window and border and also between two elements. It's units are also the same as margin and padding.