1. Introduction

1.1 Introduction

Hello, and welcome to understanding the CSS box model. My name is Craig Campbell and I will be your instructor for this course. The CSS box model is a way of describing how content is sized and positioned in a web page. Every element on your page is surrounded by a rectangular box, and understanding how that box works can save you a lot of time when laying out your content in HTML and CSS. So in this course I want to illustrate how the box model works and to help you eliminate much of the guess work that comes with laying out your content. So thank you for watching, and in the next lesson we will get started.

2. The CSS Box Model

2.1 Box Model Basics

Hello and welcome back to Understanding the CSS Box Model. In this lesson, I want to take a look at the box model at its most basic level. I want to talk about how padding and borders and margins all affect the size of our content. When we think about the content of a website, we're thinking about the text and the images, maybe some forms and videos, things like that. We're thinking about all of the things that we can see on the page. Depending on what type of content we're dealing with, what type of HTML elements we're dealing with, we can set the width and sometimes even the height of our content. Now, if we don't specify a width and height, then the content itself will take up 100% of the width of its parent container, and the height of that box will be determined by how much content there is. Now we can specify a width for our content, and, if we specify a width, then our content will always stay within that width. But, when we start taking into account padding and borders and margins, then the width of our content and the height of our content are going to start changing. So I wanna take a look at our box model from the inside out. I wanna take a look at all of the aspects that are going to affect the dimensions of our box. By default, all of our HTML content is going to be contained inside some kind of box. This box that we're seeing now, for example, might be a div element. Inside that div element, as you can see, we have a heading level element that says content, and then maybe a paragraph element below it. So maybe this is an H1 at the top. That H1 is contained inside it's own box. The paragraph below it is contained inside it's own box, but right now I want to ignore the H1 in the paragraph, and I wanna take a look at the box that all of this is contained inside of. So the base width of this box is determined either by the width of the parent element or by the explicitly setting a width for this content box. The height of the element, unless specified, is going to be determined by the amount of content that we have inside this box, so, if our paragraph is longer, then our box is going to be taller. So, again, at the base level, our width and height are determined by the content itself. However, once we start adding padding to our content, for example, as you can see here, our box is gonna get larger. So, if you set your box to a width of 100 pixels, for example, and then you add padding of 20 pixels, then the full width of your box is going to be 140 pixels because you'll have 20 pixels of padding on the left and 20 pixels of pixels on the right. Now you might have thought this happens the other way around. You might have thought that, if we were to add padding to a box of content, that the content inside it would get smaller, and that's not the case. By default, the content inside this box is going to keep this same width no matter what, but, when we add padding and borders and margins, that width is going to get larger. So, if we go back, when we see the content by itself, our box has a certain width and height, but, when we add padding, the width gets wider and the height gets taller by whatever amount we've placed for the padding property of this box. If all four sides have a padding of 20 pixels, then our box is going to be 40 pixels wider and 40 pixels taller than it started out. Now let's say we complicate this by adding a border. Let's say our border is maybe two pixels thick. Well, that's gonna add four more pixels of width because we have the left border and the right border, both of which are two pixels thick, and it will also add four pixels of height. So, in addition to our content, we have 20 pixels of padding on the top, right, bottom, and left, as well as a couple of pixels of border on the top, right, bottom, and left. Then, if we don't want this box bumping up against other boxes, if we want to put a little space around this box, that's going to extend the reach of this box even further. Now that we have this box pushing things to the side, this box is gonna be taking up even more space in our browser. So, if you're looking at the outer edge of your margins as the outer edge of your box, then we have the content, plus the padding, plus the border, plus the margins, determining the width and height of your content box. And, if you change the values of any of these properties, you're gonna change the size of the box itself. So, If you were to create a box that was 300 pixels wide, and then you started adding padding and borders and margins, you'll suddenly see that box getting larger. It's not gonna be contained within that 300 pixels you defined by default. By default, that 300 pixels is simply going to be the width of the content itself. When you add padding and border and margins, that width is going to get bigger. So this is a very basic concept, but it's one that needs to be understood very thoroughly before we move forward, before we can really start understanding how to put our content together in CSS and HTML. With this understanding, as we move forward in this course, we'll have a better foundation to start with when we start playing around with our content boxes as we start trying to understand how different types of boxes behave. So thank you for watching, and I'll see you in the next lesson.