The CSS box model is a design layout in which each HTML element is surround by a wrap or a box. The box has various element like a margin, border, padding, and the content inside the box.
A margin is the space outside the border which is around the HTML element. A border is after the margin and goes around both the padding and content.
The height is determined by width + padding + border. The width is determined by height + padding + border.
The padding is written is shorthand which accounts for 2 values out of the 4. The top and bottom are both 25px padding. The right and left are both 50px padding.