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
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> <div class="box bottom_box"> <div class="inner_box"></div> </div>
Box Model Challenge
Complete the “In Practice” portion of Chapter 4.