--description--

OK, so there might be some circles in the above image… but when it comes to layout, they fit together like rectangular boxes and not circles. In the end, laying out a webpage and positioning all its elements is deciding how you are going to nest and stack these boxes.

The only real complication here is that there are many ways to manipulate the size of these boxes, and the space between them, using padding, margin, and border. But to sum it up briefly:

• padding increases the space between the border of a box and the content of the box.
• margin increases the space between the borders of a box and the borders of adjacent boxes.
• border adds space (even if it’s only a pixel or two) between the margin and the padding.

Be sure to study the diagrams carefully.

--assignment--

Add a border to every element on the page and see how the boxes are laid out.

--questions--

--text--

From inside to outside, what is the order of box-model properties?

--answers--

Content, Margin, Padding, Border

---

Margin, Padding, Content, Border

---

Content, Padding, Border, Margin

---

Padding, Content, Border, Margin

--video-solution--

3