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="box bottom_box">
See the Pen Gtxir by Michael Macfadden (@mmacfadden) on CodePen.