Prelims - CSS box model

Question 1

is essentially a box that wraps around every HTML element

Answer 1

CSS box model

Question 2

Different parts of the box model

Answer 2

Content
Padding
Border
Margin

Question 3

The content of the box, where text and images appear

Answer 3

Content

Question 4

Clears an area around the content. Is transparent

Answer 4

Padding

Question 5

A border that goes around the padding and content

Answer 5

Border

Question 6

Clears an area outside the border. Is transparent

Answer 6

Margin

Question 7

how to calculate the total width and height of an element?

Answer 7

total width
width of content area + (left padding + right padding) + (left border + right border)

total height
height of content are + (top padding + bottom padding) + (top border + bottom border)