CSS Box Model is a container that contains multiple properties. These are content, padding, border, and margin. These can be used as a set of tools to personalize the layout of different components. According to the CSS box model, the web browser supplies each element as a square prism. Let's discuss these properties one by one.
Here innermost section contains the main content like any image, element, or something. Just after this padding is there which shares its boundary with the content.
Padding : Padding provides the space between the content and the border of the box. The padding property is used to provide padding to all sides at a time or we can use padding-top, padding-bottom, padding-left, and padding-right individually to provide the padding to a particular side.
Border : Border provides the line as a border to all the sides of this imaginary box. The border property is used to provide a border to all sides at a time or we can use border-top, border-bottom, border-left, and border-right individually to provide the border to a particular side.
Margin : Margin provides the space between the border and the edge of the box. The margin property is used to provide a margin(space) to all sides at a time or we can use margin-top, margin-bottom, margin-left, and margin-right individually to provide the margin(space) to a particular side.