The CSS box model isAll HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
The difference between margin and padding is that while padding deals with the inner space, margin deals with the outer space to the next outer element. Padding is space inside the border, whereas Margin is space outside the border.
The height and width properties are used to set the height and width of an element. The height and width can be set to auto, or be specified in length values, like px, cm, etc., or in percent (%) of the containing block.
If the padding property has two values:
padding: 25px 50px;
top and bottom paddings are 25px
right and left paddings are 50px