Opening the Box Model - Learn to Code HTML and CSS: Develop and Style Websites - page 53

Figure 4.2 When we look at each element individually, we can see how they are all
rectangular, regardless of their presented shapes
That's worth repeating: Every element on a page is a rectangular box.
Every element on every page conforms to the box model, so it's incredibly important. Let's
take a look at it, along with a few new CSS properties, to better understand what we are
working with.
Working with the Box Model
Every element is a rectangular box, and there are several properties that determine the size
of that box. The core of the box is defined by the width and height of an element, which
may be determined by the display property, by the contents of the element, or by speci-
fied width and height properties. padding and then border expand the dimensions
of the box outward from the element's width and height. Lastly, any margin we have spe-
cified will follow the border.
Each part of the box model corresponds to a CSS property: width , height , padding ,
border , and margin .
Let's look these properties inside some code:
Click here to view code image
1. div {
2. border: 6px solid #949599;
3. height: 100px;
4. margin: 20px;
5. padding: 20px;
6. width: 400px;