The CSS Box Model FAQ!

Question 1: What is the CSS box model?

A CSS box model is a layout/design that is essentially a box consisting of a margin, border, padding, and the content inside the box. They happen to be stacked on top of eacher others in this manner except this one also have an outline.

Question 2: What is the difference between margin and padding?

Although they both clear an area, margin does so outside a border while padding does so around the content.

Question 3: How is the total height and width of an html element determined?

The total height and width of an html element is determined by adding all of the pixels applied to it. For example, this CSS box model should have a width of 500 [width + 2(padding) + 2(border) + 2(margin) = total width].

Question 4: What does the following CSS property do: padding: 25px 50px?

Since we know that padding clears an area around the content while also adding height and width to an html element, then we know that "padding: 25px 50px" should both clear an area around the content by 25 pixels in height & 50 pixels in width and adds 50 pixels in height and 100 pixels in width to the html element.