The Box Model: CSS

So the box model is where it all starts when it comes to making great designs with CSS. Many people don’t know this but every element on a web page is actually a rectangular box. Even if it LOOKS like a circle, LOOKS like a triangle, or if it even looks like a dog, behind the scenes all of the elements that comprise the web page document layout are actually boxes.
 

Boxes, Boxes, and More Boxes

To give an example, below is a screenshot of me inspecting the logo on Google’s homepage. Although the logo may look like it’s six letters of different shapes and sizes originally, when you inspect the element it shows that these things are all apart of one rectangular img element:

 

Image inspecting the Google logo in Chrome developer tools

 

 

The green spacing above the logo is a top padding. The width of it is measured in pixels, and the padding above the logo is 109 pixels. The image below is a better illustration of padding as well as the other components of the box model:

 

Image of the CSS Box Model in color.

 

 

Components of the Box Model

The middle blue section represents the content of the element. It has a width and height, which in the image above is 512px (pixels) and 128 px, respectively.

The green section surrounding the content represents the padding. This section is in-between the border, and the content. It creates space around the content within the border of the element.

The orange-ish section surrounding the padding is the border. The border property not only has width, but also has style and color.

And outside the border of the element is the margin. The margin is always transparent and creates space between elements.

The padding, border and margin work in a similar way. Above, with the padding for example, sense all sides have the same width of 16px, the CSS property/value would appear as “padding: 16px;”. If you wanted the padding to be on a specific side however, you could use the padding-top, padding-right, padding-bottom, or padding-left properties. These properties are represented in the illustration below:

 

Image of the CSS Box Model showing top, right, bottom, left of each property.

 

 

Box Model Shorthand

If you wanted each side to have a different value, you could use the padding property with multiple values such as, “padding: 10px 50px;” which will give you 10px of padding on the top and bottom, as well as 50px of padding on the right and left. You could also use the shorthand, “padding: 25px 50px 75px 100px;”. This shorthand is the same as going around the box in a clock-wise fashion. Following the image above, 25px would be the top padding, 50px would be the right padding, 75px the bottom padding, and 100px the left padding. Margin works the same way. With border you must specify a width, style and color for the border to appear. As an example it can be written like so, “border: 2px solid black;”.

 

Plus You Can Change It

If you needed to limit the width of certain elements it is possible to change the box model with the “box-sizing: border-box;” property/value. Here instead of the content being a certain width and height, now the content, padding and border are limited to that width and height.

 

Conclusion

Even though every web page may look somewhat different, the layout of every web document is made up of boxes. These boxes are made up of the content in the middle, which is surrounded by the padding, which is then surrounded by the border, and they are surrounded by the margin. When you combine your content with the box model, you can customize them in virtually endless ways to get the look you want for your website. And if you need more consistency, you can even change the box model all together to make your page do what you need.
Happy styling! 🙂
 
Love & Peace,

Danielle