CSS Box Model - FAQ

Q: What is the CSS box model?

A: In CSS the term box model refers to the design and layout of each element, as per the w3schools website. The model considers the content, padding, border, and margin of the element.

Q: What is the difference between margin and padding?

A: The difference is that the margin is the area outside the border while the padding is the area inside the border.

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

A: The height and width are determine by adding the content height, width, padding, border, and margin. The equations are as follows:
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

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

A: The property is setting the top and bottom paddings to 25 pixels, and the left and right padding to 50 pixels.

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

A: The two differnce in that the border counts towards the total height and width where as the outline doesn't. Also, the outline is outside the border and is used to make the element more visible or to catch the eye more.