The Box Model

Q: What is the CSS box model?

Q: What is the difference between margin and padding?

Q: How is an HTML element height and width determined?

Q: Explain this CSS property: padding 25px 50px?

Q: What is the difference between a border and an outline?

A: The CSS box model is a box that wraps around every HTML element which includes borders, padding and the content.

A: The difference between margin and padding is the margin clears an area outside the border while the padding clears an area around the content.

A: The height is determined by height + top padding + bottom padding + top border + bottom border + top margin + bottom margin. The width is determined by width + left padding + right padding + left border + right border + left margin + right margin.

A: The CSS property (padding:25px, 50px) would put make the top and bottom padding 25 pixels and the left and right padding 50 pixels.

A: The border goes around the content but the outline goes around the border to make the box pop out more.