7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 9Length: 43 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Chrome and the Box Model

Chrome’s developer tools make it very easy to see how your boxes are behaving. In this lesson, I will open up the Chrome browser and show you how you can experiment with your styles within boxes of content.

2.2 Chrome and the Box Model

Hello and welcome back to Understanding the CSS Box Model. In this lesson, I want to show you a live example of how the box model works and I want to start by giving you a better idea of what exactly a box. Is when we talk about the CSS box model. Well when we're talking about HTML, we're talking about a number of different elements and each of these elements is contained within it's own box. And each of these elements can have it's own margins and padding and borders set forth. And we can get a really good idea of how many boxes appear on a page by opening up Chrome, right-clicking on any given element, and clicking on inspect element. This will open up our web developer tools in Chrome. And you'll notice you can hover over different element names to highlight that element in the browser window. But if we wanted to get a clear picture of just how many boxes actually appear on this site, we could come over here to our styles tab. And we can click on this little plus arrow here to add a new style And you'll see that it already creates a rule for us here. I'm just going to hit delete to delete that. And I'm going to type in star. This will apply the following rule to every single item in the document. So, for this particular rule, I simply want to add a border to every single item on the stage and I'm going to give it one pixel, solid, and red. Once we apply that, you'll see that every item on our screen now has a red box around it. And every single item on the screen is contained within a box. So we see for example inside this image, we have another item inside that image that looks like another transparent PNG file. And it's contained in its own box. The image outside of it is contained in a box. The text below it, the heading text is in a box. The paragraph text below that is in a box and all of this is contained, nested inside a larger box. So on almost any website you come to you're going to see boxes nested inside of other boxes. And it's these boxes that we're talking about mainly in this course. We're talking about how padding and borders and margins affect the layout of these boxes and the sizing of these boxes. So, let's say we wanted to take a closer look at this button here, this subscribe button. I'm going to, first of all, get rid of this rule we created. And we can try to delete it although or we can just uncheck this border that we added to everything. And let's just take a look again at just the button by itself. So I'm going to right click on that button, click on inspect element and you'll see that, that Button is highlighted here in our web developer tools. And you'll see it's just an anchor tag with a class of homes subscribe button. Now, if we come over here to the right, we can see a list of styles that have been applied to that button. And if we Scroll down to the very bottom, you should see something very familiar. This is the illustration of the box model that we talked about in a previous video when we talked about what exactly the box model was. And how it functions. You'll notice in the very center, in the blue box in the middle it gives us the width and height of the content of the box itself. This content takes up 177.3 pixels of width and 17 pixels of height. And as we hover over each of these different areas, You'll see different areas of that button are highlighted on the left. Just outside of that content we see that we have 14 pixels of padding on the left and right and 12 pixels of padding on the top and bottom. And that's how we get this particular button. Now we can play with those numbers if we want. We can, for example, double click inside one of those numbers and type in let's say forty pixels of left padding. And you'll see that this automatically applied over here. So as we increase Our padding, we're also increasing the total size of our element, we're increasing the total size of this particular box. We could also add a border to this item and that border would increase the size of the box as well. Now we can't just add a number here because this border doesn't currently exist. If we were to double click here and add a number it would simply add a border width property, but there is no border style, so the border wouldn't actually appear. However, if we scroll back up to the top, and again, we want to make sure we have this a with a class of home subscribe button selected, if we scroll back up to the top here we can see This element.style. These are the custom styles that we just changed. We changed padding left to 40px and padding right to 40px. We can also add another rule here called border, and let's give this. I'm going to make it nice and thick so you can see just how much it affects the size of the element itself, so let's give it a 10 pixel border, and let's make it solid and black. And as you can see, when we add a ten pixel border, it expands outward. So now our item, our box, is even larger than it was before. And if we scroll back down to the bottom, we can see all of those numbers reflected here. So even though our content is a hundred and seventy-seven pixels wide, once we add padding and border to it, it becomes much wider. And this is a great way to play around with a box model, and see what kind of effects, the changes you make are going to have. This is also a great way to de-bug your CSS code, if things aren't laid out appropriately, or if things aren't looking like you expected them to look, then you can go in and play with these numbers a little bit and see how it effects the outcome. So hopefully this live example has given you a firmer grasp on what we've been talking about when we've been talking about how the box model works and how your padding and borders and margins are going to affect the layout of your document. So thank you for watching and I'll see you in the next lesson.

Back to the top