DEV Community

Cover image for The CSS Podcast: Episode One - The Box Model
Brittney Postma
Brittney Postma

Posted on • Updated on • Originally published at console-logs.netlify.app

The CSS Podcast: Episode One - The Box Model

The CSS Podcast Banner

Hi, I'm Brittney and I'm on a journey to write a podcast about each episode for The CSS Podcast. I'm also an instructor over at ZTM Academy and the owner, designer, and developer at bDesigned. You can find more dev notes by me at Console Logs.

Adam Aryle and Una Kravits have a new podcast together called The CSS Podcast. 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. You can also find more about me at bDesigned.dev. Here's the first one.

Table of Contents

Episode One: The Box Model

CSS Tricks Box Model

W3C Box Model Module

Adam's Box Model Codepen

Alt Text

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
Enter fullscreen mode Exit fullscreen mode

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 or reset css 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

Discussion (0)