Box Model

Question 1

From outside to inside, what is the order of the css properties that affect a box’s dimensions

Answer 1

1. margin
2. border
3. padding
4. content (i.e. width / height)

Question 2

How far do background-images and background-colors extend in the box model?

Answer 2

The image and colors will extend through the content to the border unless this default behavior is adjusted with the background-clip property

Question 3

Does each box have its own margin?

Answer 3

No, margins can be “shared” when adjacent to another box. This is called margin collapsing.

Question 4

How do an adjacent top and bottom margin “collapse?”

Answer 4

Top and bottom margins will be collapse using the following calculations:

1. The largest individual margin size will be used
2. If the margins are equal, only one margin will be used