CSS Box Model

FAQ Concerning Questions

What is the CSS box model?

A CSS box model is a box that wraps around every HTML element that consists a margins, borders, padding, and the actual content.

What is the difference between margin and padding?

Margin clears an area outside the border and padding clears an area around the content.

How is the total height and width of an HTML element determined?

Total element width = width + left padding + right padding + left border + right border + left margin + right margin
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Explain this CSS property: padding: 25px 50px;

The padding property would make the top/bottom padding 25px and right /left padding are 50px