Understanding the Box Model

In this lesson you'll learn the basic concept of CSS's box model, so you can understand how spacing and borders on an element actually work. This is for people searching "what is the CSS box model" or "CSS padding vs margin."

Every HTML element is treated as a "box." From the inside out, it's layered as padding (inner spacing), border (the border line), and margin (outer spacing). This is called the box model, and it's the foundational idea behind CSS layout.

The sample code specifies three things on .box: padding: 16px;, border: 4px solid #7c5cff;, and margin: 20px;. Check the difference: padding is the element's inner spacing, so it's shown with the background color applied, while margin is the element's outer spacing, so it's shown without any background color.

When an element's appearance feels "off for some reason," the cause is often a lack of understanding of padding, border, and margin. A common beginner stumbling block is a phenomenon where margins between two elements, top and bottom, overlap and get "collapsed" — resulting in a smaller gap than expected.

Get in the habit of picturing an actual box in your hands, being mindful of the inner spacing and outer spacing as you adjust them. This is the most basic of basics in CSS design — understanding it is considered so important that building a complex layout without it is said to be difficult.