The CSS Podcast: Episode One - The Box Model
Tags: css, podcast, csspodcast
Published: 2020-07-28 03:58:39

---
title: The CSS Podcast: Episode One - The Box Model
published: true
description: A visual representation of episode one of The CSS Podcast.
tags: #css #podcast #csspodcast
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ii2s804y6dz0x7wiy6ar.png
canonical_url: https://console-logs.netlify.app/logs/css-podcast/#episode-one-the-box-model
---

![The CSS Podcast Banner](https://dev-to-uploads.s3.amazonaws.com/i/ii2s804y6dz0x7wiy6ar.png)

Hi, I'm Brittney and I'm on a journey to write a podcast about each episode for [The CSS Podcast](https://thecsspodcast.libsyn.com/003-specificity). I'm also an instructor over at [ZTM Academy](https://academy.zerotomastery.io/?affcode=441520_gjue7n-1) and the owner, designer, and developer at [bDesigned](www.bdesigned.dev). You can find more dev notes by me at [Console Logs](https://console-logs.netlify.com/).


[Adam Aryle](https://twitter.com/argyleink) and [Una Kravits](https://twitter.com/Una) have a new podcast together called [The CSS Podcast](https://thecsspodcast.libsyn.com/). I have really been enjoying it and decided to follow along by writing a post for each episode. Also posting these over on my [Console Logs site](https://console-logs.netlify.app/logs/css-podcast). You can also find more about me at [bDesigned.dev](http://www.bdesigned.dev/). Here's the first one.

## Table of Contents

- [Episode One: The Box Model](#episode-one-the-box-model)
  - [Intrinsic vs Extrinsic Sizing](#intrinsic-vs-extrinsic-sizing)
  - [Boxes Everywhere](#boxes-everywhere)
  - [User Agent Stylesheet](#user-agent-stylesheet)
  - [Scrollbars](#scrollbars)

## Episode One: The Box Model

[CSS Tricks Box Model](https://css-tricks.com/the-css-box-model/)<br/>
[W3C Box Model Module](https://www.w3.org/TR/css-box-3/)<br/>
[Adam's Box Model Codepen](https://codepen.io/argyleink)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k37h9yx2munaazaurh8t.png)

In CSS every element is just a rectangular box. That's easy right, its just boxes we move around the screen. Well, sort of, but its really about the content thats in the box that can affect the rest of the box. Notice above the margin, outline, and box shadow are striked-through to show that they **do not** affect the size of the box itself. They do however, affect content around the box. The first part to think about when understanding the box model is how the sizing is determined, intrinsic or extrinsic.


### Intrinsic vs Extrinsic Sizing

**Extrinsic** is when the box size is predefined and content is put inside of it. We would explicitly set the height and the width of the box and force what's inside to stay within its given area. **Intrinsic** is when the size of the box is dynamic to the content put inside of it. In this style we would allow whatever our content is to determine the size of our box.

### Boxes Everywhere

Once we figure out whether the content box size is predefined or dynamic, we then have the **padding box** and then the **border box** outside of that. These 3 boxes determine the size of the box.So the size of the box is calculated like so:

```
width = width + padding-left + padding-right + border-left + border-right
height = height + padding-top + padding-bottom + border-top + border-bottom
```

Outside of the border, we have the **margin**, **outline**, and **box-shadow** boxes. As I said before, these don't affect the inner size of the box. They are **painted** on after the box size is calculated. You can see this when adding a border to an element versus adding an outline. A border is going to change the size of the box, which the outline will not change the placement of the element. It is important to note that **margin** is affected by the size of the content and affects the space between elements. It also belongs to the element with which it is added, except in the case of gap where it then belongs to the parent grid (or flex soon) that called it.

### User Agent Stylesheet

Occasionally, you may notice elements automatically have padding or margin applied to them. Such as a list item being indented with padding. These styles are provided by the user agent, or browser, that you are using. To avoid running into issues with this, it is common to use a [normalize css](https://necolas.github.io/normalize.css/) or [reset css](https://meyerweb.com/eric/tools/css/reset/) file. There are many versions out there or you can tweak them to your liking.

### Scrollbars

Scrollbars are interesting in CSS. They live in the same box as the **padding box**.

![Gallery view of box model](https://dev-to-uploads.s3.amazonaws.com/i/c1ldmwnjvewdbkzco8k4.png)