CSS box model explained (padding, border, margin)

Key Takeaways

Hey folks, this is the first in a series of videos all about CSS layout. Working with layouts means that you're using CSS to control where an element is positioned in relation to other elements around it, its parent element, and even the entire viewport. In this series, we'll be covering all of the CSS properties that deal with layouts, such as display, position, flexbox, grid, and others. Now, [snorts] in this video, we're going to be starting with the building block of every website, the box model. According to the box model, every element on a web page, whether it's text, an image, a video, even an empty div. Ultimately, these are all boxes in your browser. And each of those boxes contains even more boxes arranged in increasing layers like an onion. Starting from the center, we have the content box. Then working our way out, we have padding, border, and then margin. So, let's take a closer look at each of these boxes, starting with the content box. All right, to start off, here's a demo website with a div that has a class of block, and it has some text in it. Now, on the right, I have the Firefox Dev Tools open. And in the layout tab down here, it gives us a box model of this div. So the blue content box in the center tells us that the content is 469 pixels wide and 55 pixels tall. So the size of the content box can be determined by the size of the content itself. So in our HTML, if I type in Lauram 10 to add 10 more words of placeholder text and save, you can see that the content box gets bigger because there's more text content. You can also explicitly set the width and height properties of the element in the CSS in order to set a specific size. So in our styles for this block, I'll set width 250 pixels and height 200 pixels. And when I save in our dev tools, it tells us that the content is 250x 200 pixels. You just want to be careful when you're setting a specific size, especially with height, because if you make the height smaller than what the natural height of the element would be. So, I'll make this 100 pixels. Then the content is going to overflow the bounds of the element, which doesn't really look great. Okay. So, we've talked about the content. Next up is the padding. So outside of the content, you can add a layer of padding, which is basically adding space around the content, but still within the overall bounds of the element. So let me show you what that looks like. So in our styles, I'm going to add padding 20 pixels. So I've added 20 pixels of padding. So you can see on the website, the text doesn't seem as cramped as it was before. And since boxes are rectangles with four sides, there are four sides of padding that you can add. Now in our rules tab, we can see our padding rule that we added in our styles. The padding property is actually a shorthand property which it sets the value for four individual padding properties. Padding top, padding right, padding bottom, and padding left. So writing padding 20 pixels like we did here sets all four of those properties to the same value 20 pixels. And you could also set these properties individually in separate style rules and it would do the same thing. So if I copy those four rules, paste it in, you can see that we have the same amount of padding on all four sides. We've just set four individual style rules. And honestly, it's just easier to use the shorthand padding. So that's what most people do, including myself, especially when the padding is going to be the same. And even if you have different amounts of padding on the different sides, you can set them all still with this padding shorthand property. So I'm going to set 10 pixels, 20 pixels, 30 pixels, 40 pixels. So the first number is padding top of 10 pixels which we can see here in the diagram. The second number 20 pixels is the padding right. Then we have 30 pixels padding bottom. And the last number 40 is 40 pixels of padding left. And you can remember the order of the properties by using the acronym TRBL. Top right bottom left. Or you could just say trouble to help yourself remember that. Now, if you want the same amount of padding on the top and bottom and then a different amount of padding on the right and the left, you could have the padding property just have two values. So, the first value of 10 pixels is going to be applied to the top and bottom, which we can see in our diagram. We have 10 pixels on the top and 10 pixels on the bottom. And then the second value 20 pixels is going to be applied to both the right and the left which again we can see here 20 pixels of padding on the right and also on the left. You can even use three values for the padding property. So if I add 15 pixels the first value of 10 is going to be the top padding. The second value of 20 is going to be the both the right and the left padding. And then the last value 15 pixels is going to be the bottom. Now if you want to only set the top and bottom padding and you don't want to set anything for right and left, you unfortunately cannot do that just with the padding property. But you can do this with another shorthand property padding block. So padding block is what's called a logical property where instead of using physical directions top, right, bottom and left, you are instead using the writing mode directions. So what this means is that in standard English and most western languages the block direction is the vertical direction because multiple lines of text are written starting from the top and moving down toward the bottom. And with the writing mode directions we have the logical properties padding block start which is the same as padding top and we have padding block end which is the same as padding bottom. Now with the shorthand property padding block you can use one value to set both padding block start at the top and padding block end at the bottom to the same value. So here I am setting padding block start or padding top to 20 and padding block end or padding bottom to also 20. You can also use two values in padding block to set different amounts of padding on the top and bottom. So padding block 20 pixels 30 pixels is setting 20 pixels at the top and 30 pixels at the bottom. And since padding block is a shorthand property, you can also set them individually using padding block start and padding block end. Now in addition to the block or vertical direction, we also have the inline direction. This is horizontal for most western languages starting from the left and ending at the right because in those languages words are written in a line from left to right. So you could set padding inline with one value of 20 pixels and that will set 20 pixels of padding on the left and the right. Or you can use two values to set left and right padding to different values if you want. So now we have 20 pixels of padding on the left or padding inline start and 40 pixels on the right or padding inline end. And of course like the others you can set these rules individually with padding inline start and padding inline end. Now at this point you might be asking yourself which set of properties should you be using? Should you use the logical property like padding block start or should you use the original physical direction property padding top? Now a full explanation on all these logical properties would be a whole another video. So just briefly I'll tell you that either one is fine and they both do work in the browser. However, if you are building a multilingual website that needs to support languages that have different writing directions, then it might make your life easier to use the logical properties for not just padding, but you can also use them in border, margin, and some other properties. Now personally I do try to use the logical properties for at least my padding and margin just because the terms inline block start and end are used in other areas of CSS like in the display property as well as flexbox and grid. So it feels kind of more consistent to me at least to use a logical properties in those cases. All right, so that's padding. Now let's move to the next layer outside of the padding box, the border box. Adding a border to an element is going to by default create a rectangular border around both the content box and the padding box. You can add a border with the shorthand border property which is made up of three properties. Border width, border style, and border color, but most people just use the shorthand property. Now, the first value, border width, sets how thick the border is. So, right now, we have it set to 10 pixels. Set it to 20 pixels or 5 pixels, whatever you want. And if you leave this blank, it's going to default to the medium value, which is about 3 pixels depending on your browser. Now, the second value is border style. This controls what type of border that you have. Usually, you're going to have a solid border, but you can also have dashed, dotted, inset, and more. Now, you do have to set the border style. If you don't, if I delete solid, then the border is not going to exist at all, even if you have the other border values set. Now both padding and border are considered to be part of the element itself. What this means is that if you set a background color on the element like we have here the padding box and the border box are going to have that background color. Now you can easily see the background color in the padding area but it does exist behind the border which you can see if I make it semi-transparent. So now I've made the border color have an opacity of 25%. So you can see the green color behind that purple border color. All right. So that's the border part of the box model. Now let's take a look at the last outermost box, the margin box. So the margin box exists outside of the border box. If I add a margin of 20 pixels around our div, you can see it adds space around the div outside of the border box. So compared to padding and border, margin isn't really considered to be a part of the element itself. And you can see here that the background color it that extends into the padding and the border box are not getting applied to the margin box. So whereas padding adds space inside the bounds of an element, margin is going to add space outside the bounds of the element to add space between the element and its parent as we can see here. And it also adds space between the element and other neighboring elements. So let me show you what that looks like. So in our HTML, I'm going to create another div with a class of block 2. Add a little bit of Lauram ipsom text. Oops. There we go. And then in our styles, let's give it a background color as well. So now we can see that we have this second div which has a blue background color and the margin of 20 at the bottom of our green div is adding space between the two divs. And if I made the margin zero and you can see that it removes a space around the div as well as between the div and the next light blue div. So like with padding, you can add margin on the four sides individually with margin top, margin right, margin bottom, and margin left. And this will do the same thing as margin of 20 pixels. adding the same amount of margin around all four sides of this div. But of course, it's just easier to use the shorthand margin property, especially when the margins are going to be all the same. So again, you can use two values to set the top and bottom margins to one amount and the left and the right sides to a second amount. So here margin of 20 pixels 10 pixels is setting the top and bottom to 20 and then the right and the left to 10. And you can do three values. So if I add 30 pixels as the third value, then we have 20 pixels on the top. We have 10 pixels on the right and left. And then the last number 30 is getting applied to the bottom. And just like with padding, you can use the logical properties instead of the physical directions to use block for the vertical directions and inline for horizontal directions. So margin top is also margin block start, margin bottom is margin block end, margin left is margin inline start and margin right is margin inline end. And with the logical properties, you can set just the top and bottom margins with a shorthand property margin block to set the top and bottom to the same amount. Or we can set the top and bottom margins to different amounts with margin block and having two values. So here we're setting 20 pixels on the top or margin block start and we're setting 40 pixels on margin bottom or margin block end. And we can do the same thing with margin inline where we can set just the left and right margins to 20 pixels as we're doing here. Or we can set them to different values to set the first value to margin inline start or margin left and setting the last value the second value to 10 pixels for margin inline end. Now there are some more tricky aspects of using margin especially with block versus inline elements and also margin collapse which we will be getting to all those later in this series but I just wanted to give you the basics of how margins work in relation to the box model. And lastly we can't talk about the box model without talking about box sizing. This CSS property controls how the final width and height of an element are calculated in the browser. So, in our HTML, let's start by creating a div with a class of block. And I'm going to add 20 words of placeholder text. There we go. Then in our styles, let's add some background color. I'll say light green. And we also want to give it a width and a height of a static amount. So I'll say width 300 pixels, height 100 pixels. So now when we inspect this element in our dev tools, if we look at the Firefox box model diagram, the blue content box has a width of 300 and a height of 100 because of the styles that we wrote. And if I scoot this up a little bit, we can see that the final width and height down here at the bottom also say 300 and 100 again is coming from the size of the content box. Now in our styles, I'm going to add padding. I'm going to add padding of 20 pixels on all four sides. So when I save, you can see that the element has gotten bigger because of the padding. So we see our padding around the content box and the content is still 300x 100 pixels. However, the final size down here, the width is 340 and the height is 140. So this final size of the full element is coming from the content size plus the padding added to it. So for the width, we had 300 pixels originally and then we're adding 20 pixels of padding on both the left and the right sides. So that's 40 pixels total of padding. And then that results in a final width of 340 pixels, which we do have here. And in the same way for the final height, we're taking the 100 pixels of height and adding 40 pixels of padding on top and bottom to get 140 pixels of final height. Now, the sizing is currently working this way due to the box sizing property, and we didn't set it to anything in our styles. So it's taking its default value of content box and you can actually see this default value if we go to the computed tab check the browser styles checkbox and filter for box sizing. You can see that we have content box as the value. Again this is the default value coming from the browser. So this means that the width and the height that we set in our styles are only going to affect the content box itself. It's not going to include the padding box or the border box or the margin box. Then you can see this if I add a border. Let's set it to five pixels solid. This is adding 5 pixels of border on all sides. And now the final width and height have also been increased. So now the final width is 300 plus the 40 pixel of padding on either side 340 plus 10 pixels of border on either side to get 350. And in the same way the final height is coming from the 100 pixels of content height, 40 pixels of padding, so 140, and then 10 pixels of border on top and bottom to get 150. And if I add a margin, let's add a margin of 20 pixels on all sides. You can see we've added it here. This does not affect the final size, which is still the 350x 150 again because margin is not considered to be within the bounds of the element, but it's just added to the outside of the element. So adding the padding and border values to the width and height from your styles isn't really intuitive because if you set your element to have a width of 300 pixels in your styles, you would expect that the element would have a final width of 300, not 350 like we have here. Fortunately, we can fix this honestly kind of strange behavior in our styles. So, it's actually considered good practice to add a style rule at the very top of your CSS file that targets all elements using the wildcard symbol. And you can also target the before and the after pseudo elements. And in here, we want to set box sizing to border box. So now we've changed our box sizing from content box, which is a default, to now border box. This is going to make the final box size of the element extend out to the border box. So that the final width and height that we set in our styles are now going to include border and padding. You can see here that the final size is now 300 width and 100 height to match our styles of width 300 and height 100. So now to make it all work, we are actually subtracting the amount of padding and border from the content size. So, it's making the content box smaller. And on the website, you can see that now the text in the div is actually overflowing the bounds of the content box, which isn't really desirable. And this is actually one reason why you generally shouldn't set a static height for elements, especially for text elements um when you want this to be responsive because they can overflow like they're doing here. And I really just did this for demonstration purposes for width and also for height. So, what you really want to do is just delete this height style rule. And now we have the 300 pixels of width down here. But then the height is allowed to be whatever it needs to be in order to fit all the actual content. All right. And that is the CSS box model. And if you want to learn more about CSS, you might like this video, which has the first 3 hours of my course on how to build a responsive website from a Figma design with HTML, CSS, and JavaScript. So, thanks for watching and we'll see you in the next one.