The CSS box model is a box/border wrapped around an element.

The margin is the invisible space between the border and the edge of the webpage. The padding is the inviisble space between the border and the html content.

The HTML element height and width is calculated by: total width = width + left padding + right padding + left border + right border +left margin + right margin.

total height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin.

The top padding is 25px and the right padding is 50px;

An outline is directly outside of a border, whereas the border surrounds the page's content.