Lesson 4A: The Box Model

One of the most challenging parts of building a website is understanding how to control where everything lays out on the page. The Box Model will help you visualize what’s going on with the code you write.

The Box Model

Box Sizing

Examine the code below to see “The Box Mode” in action. Notice the difference between the “content-box” and “box-border” values of the box-sizing property. Then click “Edit on CodePen” to modify the code yourself.

<div class="box top_box">
  <div class="inner_box"></div>
<div class="box bottom_box">
  <div class="inner_box"></div>

See the Pen Gtxir by Michael Macfadden (@mmacfadden) on CodePen.

Box Model Challenge

In Practice

Complete the “In Practice” portion of Chapter 4.

Twitter Documentary