Box Model

Question 1

What is the general rule of using units?

Answer 1

font-size: rem
padding & margin: em
width: em or %

Question 2

How does the browser calculate em?

Answer 2

It becomes relative to the font-size of current element, when used on anything other than font-size. Font-size is calculated relative the parent’s font-size.

Question 3

How does the browser calculate rem?

Answer 3

The font size of the root element: or :root.

Question 4

What is the best unit of width: for a responsive design?

Answer 4

%

Question 5

What is the difference between content-box and border-box in box-sizing property?

Answer 5

Content-box makes 100px width set the content box of an element to 100px.

Border-box will include the border and padding in the 100px of the element.

Question 6

What are the four areas of an element’s box model, from the inside out?

Answer 6

Content, padding, border and margin.