This box will change your life

Click the video above to play

Slides

Transcript

This box will change your life

Hi friends, I'm Salma and I help developers build stuff, learn things, and love what they do. If you've seen me on the internet before you might know me as white anther or white P-4-enth-3-R if you use a screen-reader. I work as a developer advocate for Contentful. And if you've never heard of Contentful, it's a headless content management platform that offers you a GraphQL and REST API, and many other tools to help you build some really great stuff.

This is a box. This is another box. Here are some more boxes. Here are some tiny boxes. Here are some more boxes. Let's add some more boxes. And as you see this evolve, you might start to realize that it's starting to look incredibly like the layout of a webpage. And these are the boxes we're going to be talking about today.

But first, what is CSS?

You might know CSS is the language that is used to style your web pages and make them look really cool. CSS stands for cascading style sheet and the three most important things to know about CSS are the cascade, specificity, and inheritance.

Cascade is an algorithm that defines how to combine CSS property values from different sources. Specificity is how browsers decide which CSS property values are the most relevant to an element, and therefore will be applied. And inheritance is where elements inherit CSS properties from their container elements or parent elements, much like how parents pass characteristics down to their children in real life. And this is one of the most important things we're going to be looking at today.

But first — you versus CSS. In the past, you've probably had a bit of a fight. Let's take a look at one of the most common fights you might've had.

Let's set up an HTML div element with class equals container. Let's give that container a max width of 640 pixels. Let's give it a margin of auto, to centre it on the page, and let's give it a big fat red border. Everything here is as we expect, there is no content inside that box yet. And so the border will collapse on itself.

Let's add a box inside that container. Let's give it a yellow background and a big fat blue border. Again, this is how we expect. There's no content inside that box yet. And therefore the border has collapsed.

Let's give the box a padding of 20 pixels, and we are beginning to see what that box might look like. Let's add some content inside that box. Let's add a paragraph tag and we're starting to see some results.

Now let's add width 100% to that inner yellow box. Of course, it's just going to be 100% of the width of the parent container with the red border, except this is what happens. This is currently a box that is ruining my life and how do I fix it?

We can fix it with one CSS property box sizing, border box, and then we start to see something more like we want.

And this is the fundamental principle of the CSS box model. And this is the box that will change your life.

What is the CSS box model?

The CSS box model is the fundamental property of how to work with design and layout in CSS. If we think back to all of these boxes on this webpage layout, and if we look inside those boxes, we see a model that we can work with if we understand it.

At the centre of the box is a box of content. Around that content box is a box of padding. Around the box of padding is a box of border. And on the outside of this box is a box of margin. And you'll see that these boxes tessellate and work like this together in layouts on a webpage. Let's take a look at a box on my website.

Here is the content. We have some padding that separates the content from the border, and we have some margin around the box that centres it on the page. We can visualise this in Chromium dev tools, where we see colour-coded parts of the CSS box model to help us understand our layout. And if you hover over those areas on the box, you'll begin to see how your page is comprised.

So box sizing, border box fixed everything for us, but what is box sizing and how does that property work? The box sizing property defines how the width and height of an element are calculated. If we go back to this image of the CSS box model from Chromium dev tools, we'll see the numbers on each of the sections are the widths of those areas calculated in pixels.

With the box sizing property, you can choose to include padding and borders in the width and height calculation with box sizing border box, or you can choose to not include padding and borders in the width and height calculation with box sizing content box. And what's very interesting to note is box sizing content box is the browser default.

If we take a look at this box class again with no box sizing specified, the default is content box. And this means that the calculated width of that black box inside the container with the red border is 100% plus 20 pixels of padding all around, plus 10 pixels of border all around. If we take a look at that same box with box sizing, border box, the calculated width is 100% taking into consideration the padding and the border as well.

Now you might have seen ways to mitigate this problem with CSS resets. And there is a big problem with CSS resets when you're working with complicated layouts and just CSS in general.

But first of all, what is a CSS reset?

A CSS reset is a set of CSS rules that resets the styling of all HTML elements to a consistent baseline — with one caveat that it's probably opinionated. There is a vast array of CSS reset packages available that have been in use and in development since the early two thousands. And most of them — if not all — apply a box siding border box to star, which is every single element on your page. If you want to find out more about CSS resets, there's a great article from Chris Coyier on CSS tricks linked here.

But what I really want to ask you to do is to understand the behaviour of your boxes, understand what you want to achieve depending on what box sizing property you choose. MDN has a great box sizing playground to let you experiment with content box and border box and understand how the child will respond to the parent element.

And they also provide some really good advice. It's often useful to set box sizing to border box to layout elements. This makes dealing with the sizes of elements, much easier, and generally eliminates a number of pitfalls you can stumble on which we found in the example before. On the other hand, when using position relative or position absolute the use of box sizing content box allows the positioning of values to be relative to the content and independent of changes to border and padding sizes which you might want sometimes. Know what you want to achieve and don't go blanket resetting everything.

Let's take a look at understanding browser defaults.

You versus browser defaults. You've probably had a similar fight as what we saw before. Now, what are browser defaults? You might know of them as the user agent style sheet. A user agent is any web browser or any device that you can view an HTML webpage on.

And where do we find those browser defaults or the user agent style sheet? In Chromium, you can see them in the styles inspector in italics labelled with user agent style sheet. And this is in browsers such as Brave, Edge, Chrome and Opera. In Firefox, if you want to see the user agent style sheet, you need to go to the options and check the show browser styles option. And you'll see them in the same place. What you might notice already, there's a discrepancy between the Firefox default styles and the Chromium default styles already. And in Safari, you can see them in a similar way to Chromium.

Let's go back to our box that we used before, which was a div element, an HTML div element. What do you think is going to happen if we change that element to a span? Our box breaks again. Now, why is this? If we go into the styles inspector, we can see actually there are no default user agent styles applied to this span, obviously. If we go to the computed tab, we can see actually that the span is display inline, whereas the div was display block. If we change this span and give it a display property of block or inline block, the result we get is what we expected.

And so this comes to different types of boxes. There are three different types of boxes to work with in CSS.

You have block boxes which could be block, flex or grid. You have inline boxes. And you have an intermediary between block and inline, which can be inline, inline flex, or inline grid. Block boxes take the full width of the page, stack on top of each other, and their margins apply around them vertically and horizontally. It's worth mentioning that block, flex and grid containers behave the same way, but they affect how their child elements behave depending on the property that you choose.

You have inline boxes, which are stacked together horizontally. Horizontal margins do apply to inline elements, but vertical margins do not. If you want vertical margins to apply around an inline element, you need to change those to inline block, inline flex or inline grid. Here's a quick summary table to see how the different box types behave.

You can see that the inline star boxes are that intermediary between how inline boxes and block boxes behave. Let's take a look at a quick example. Here is a set of inline elements. If I apply margin left or margin right to those elements, it applies on the page. If I add margin bottom and margin top, they do not apply. As soon as I change that display property to inline block, inline flex or inline grid, then all of the margins around vertically and horizontally apply.

So I have one simple trick for you to solve all of your CSS problems. Always declare the display property. Don't rely on the browser defaults. This means you can easily switch between different HTML elements without breaking your layouts.

And in fact, I would encourage you to go one step further and always declare everything. Don't rely on that inheritance, especially when you're switching around your HTML tags.

Wrapping up

The CSS box model and understanding it will change your life. It changed mine. You can use the CSS box model concepts to understand how your layouts are really built and how they'll work.

Think inside the box. Think about how you want your content and your padding and your border to behave. Think outside the box. Think about how you want your margin to be applied. Think about the box. Is it a block box or is it an inline box and how do you need it to stack on the page? The CSS box model, when you get to grips with it, I guarantee you will change your life.

Come and say hi on my code newbie profile, and you can find me as whitep4nth3r and let's continue the discussion of this talk. And I want to know how you've found it and has it helped you, and will it change your life. You can find me on the internet as white panther or white P-4-enth-3-R everywhere.

I stream regularly on Twitch and I create YouTube content as well. Build stuff, learn things, love what you do. And I hope you have a great time at CodeLand. Thank you very much.