NOTE This file was generated by Descript 1 00:00:00,000 --> 00:00:01,290 Hi guys and welcome back. 2 00:00:01,339 --> 00:00:05,060 In this video, let's talk about the box model, which is a really 3 00:00:05,060 --> 00:00:09,080 important concept in CSS because the box model determines the size 4 00:00:09,080 --> 00:00:11,390 and shape of elements on the page. 5 00:00:11,792 --> 00:00:16,312 Every element uses the box model and the box model for each element is made up 6 00:00:16,312 --> 00:00:21,211 of the content area for that element, the padding, the border and the margin. 7 00:00:21,718 --> 00:00:24,358 Let's take a look at a diagram of the box model. 8 00:00:24,448 --> 00:00:28,018 Let's say we've got this element that has a certain content size. 9 00:00:28,468 --> 00:00:30,448 Then you can see that around the content. 10 00:00:30,448 --> 00:00:35,201 We've got a padding, then around that we put a border and around that a margin. 11 00:00:35,351 --> 00:00:38,171 So these four things make up the box model. 12 00:00:38,570 --> 00:00:42,230 Let's say we've got a width of 300 pixels, the height or 50 13 00:00:42,230 --> 00:00:44,330 pixels and a padding of 10 pixels. 14 00:00:44,741 --> 00:00:47,501 The width and height properties change the size of the content area 15 00:00:47,771 --> 00:00:49,781 and the padding is added outside it. 16 00:00:49,991 --> 00:00:54,491 Note that when we say padding 10 pixels, that means 10 pixels on every direction. 17 00:00:54,421 --> 00:00:58,531 So what will the final size of the element on the page be 18 00:00:58,531 --> 00:00:59,941 for all intents and purposes? 19 00:01:00,419 --> 00:01:04,379 Let's say that we've got some CSS that looks like this targeting 20 00:01:04,379 --> 00:01:06,059 an element that looks like that. 21 00:01:06,059 --> 00:01:09,299 So we've got an empty div and we're setting the width and height of it. 22 00:01:09,299 --> 00:01:11,819 So it's going to be an empty div with a specific size. 23 00:01:12,179 --> 00:01:16,552 And then we've also set some padding of 10 pixels and a background color of purple. 24 00:01:17,049 --> 00:01:18,729 The output is going to look like this. 25 00:01:18,759 --> 00:01:23,639 So the purple element takes up the entire browser window assuming that this browser 26 00:01:23,639 --> 00:01:25,399 window is a specific size of course. 27 00:01:25,859 --> 00:01:30,175 Notice that even though there is a padding in this element background-color 28 00:01:30,405 --> 00:01:32,985 takes up that padding area as well. 29 00:01:33,405 --> 00:01:35,895 The box model for this element looks something like this. 30 00:01:36,045 --> 00:01:39,932 We've got 300 in width and 50 in height for the content. 31 00:01:40,262 --> 00:01:43,965 And that is purple, but the padding, which is 10 pixels in every direction 32 00:01:44,445 --> 00:01:47,845 also takes the background color so that is how the background color works. 33 00:01:47,845 --> 00:01:50,035 It also affects the padding area of an element. 34 00:01:50,409 --> 00:01:55,799 You can see that the final size of the element is 320 wide and 70 high 35 00:01:56,099 --> 00:02:00,299 because in the standard box model, the width and height properties 36 00:02:00,329 --> 00:02:02,469 affect the size of the content area. 37 00:02:02,782 --> 00:02:04,819 In this model, that is what happens. 38 00:02:04,819 --> 00:02:08,239 So if we want the element to have a final width of 300 39 00:02:08,239 --> 00:02:10,039 pixels, we need to do some maths. 40 00:02:10,399 --> 00:02:14,929 We need to say that the final width is equal to the width minus the vertical 41 00:02:14,929 --> 00:02:17,659 borders, minus the vertical padding. 42 00:02:18,055 --> 00:02:21,235 So in our case, if we wanted the element to have a width of 300 pixels, 43 00:02:21,235 --> 00:02:25,435 including the padding, we would have to set the width to 280 plus 10 44 00:02:25,435 --> 00:02:27,205 padding on each side left and right. 45 00:02:27,455 --> 00:02:28,825 Gives us a total of 300. 46 00:02:29,390 --> 00:02:33,680 So that can be really fiddly, which is why the alternative box model exists. 47 00:02:34,190 --> 00:02:37,830 In the alternative box model, things work a bit more like what you'd expect 48 00:02:37,920 --> 00:02:42,150 the size of the element is calculated as the content size + padding + border. 49 00:02:42,430 --> 00:02:46,140 Margin though is still calculated separately, since technically it's used 50 00:02:46,140 --> 00:02:47,820 to separate elements from each other. 51 00:02:48,125 --> 00:02:51,755 The background color, for example, doesn't apply on the margin area of an element. 52 00:02:52,224 --> 00:02:56,244 I recommend that you use the alternative box model for all elements, and 53 00:02:56,244 --> 00:02:59,324 it's really quite straight forward to set it up for all elements. 54 00:02:59,257 --> 00:03:01,607 If you want to set it for one element, you do box-sizing: 55 00:03:01,627 --> 00:03:03,007 border-box; that's on the left. 56 00:03:03,697 --> 00:03:07,387 And if you want to set it up for all elements, you set it up on the body 57 00:03:07,477 --> 00:03:11,437 as box-sizing: border-box; and then you use the universal selector as 58 00:03:11,437 --> 00:03:15,847 well as before and after to set the box-sizing of all elements to inherit. 59 00:03:16,252 --> 00:03:18,962 That way, you're going to set everything to border-box. 60 00:03:19,362 --> 00:03:22,482 We've got a bit more information on this in the ebook so check that out. 61 00:03:22,512 --> 00:03:24,732 It's linked in the resources section of this lecture, if you 62 00:03:24,732 --> 00:03:25,992 want to learn a bit more about it. 63 00:03:26,404 --> 00:03:30,554 We also have to talk about block versus inline elements, because everything we've 64 00:03:30,554 --> 00:03:34,724 talked about until now applies only to elements that are displayed as blocks. 65 00:03:35,144 --> 00:03:39,384 For inline elements, we cannot set explicit width and height. 66 00:03:39,384 --> 00:03:41,154 Those are set by the content. 67 00:03:41,587 --> 00:03:44,767 And also we can't create space above or below them with 68 00:03:44,767 --> 00:03:47,107 padding, margin or borders. 69 00:03:47,247 --> 00:03:51,337 Although the left and right padding margin and borders still does work. 70 00:03:51,997 --> 00:03:55,987 So let's take a look at an example of inline elements using this box model. 71 00:03:56,419 --> 00:03:58,989 Let's say we've got some HTML, like this one. 72 00:03:59,019 --> 00:04:01,569 There's is a main element and inside it, we've got a paragraph. 73 00:04:01,569 --> 00:04:05,409 So
and

are both block level elements. 74 00:04:05,862 --> 00:04:09,432 So if we set the max width of the paragraph to 100 pixels, 75 00:04:09,462 --> 00:04:12,102 we end up with something that looks like this, a paragraph that 76 00:04:12,102 --> 00:04:13,422 sort of wraps onto two lines. 77 00:04:13,402 --> 00:04:15,232 This is the base for our example. 78 00:04:15,232 --> 00:04:18,202 Now let's say that we've got something that looks almost identical, but 79 00:04:18,202 --> 00:04:22,972 we've got an element around the paragraph word here on the left. 80 00:04:23,376 --> 00:04:25,086 So this is going to be an inline element. 81 00:04:25,471 --> 00:04:29,352 And then we're adding some more styles to our CSS, as well as the 82 00:04:29,352 --> 00:04:30,716 max-width on the main element. 83 00:04:30,956 --> 00:04:36,636 We've also added some padding, border and background-color on the em element too. 84 00:04:37,159 --> 00:04:41,376 Remember the em is inline so we cannot add the space above or below 85 00:04:41,376 --> 00:04:43,549 it using margin, padding or border. 86 00:04:44,089 --> 00:04:47,039 So what's going to happen is it's going to display it like this. 87 00:04:47,516 --> 00:04:52,406 The left and right padding moved the surrounding text, but the top and bottom 88 00:04:52,406 --> 00:04:54,566 padding did not move the surrounding text. 89 00:04:54,566 --> 00:04:56,553 It just sort of overlaps. 90 00:04:56,956 --> 00:05:00,706 Remember that the background color still spans the entire size of the 91 00:05:00,706 --> 00:05:04,156 element, including the padding area so that's why it looks like this. 92 00:05:04,426 --> 00:05:08,686 But it's important to remember that for inline elements, we cannot shift elements 93 00:05:08,716 --> 00:05:11,146 above or below them using the box model. 94 00:05:11,654 --> 00:05:13,504 Well, that's everything from me for this video. 95 00:05:13,504 --> 00:05:16,744 I hope this has been interesting and I know it's tricky to fully grasp how 96 00:05:16,744 --> 00:05:20,794 this works, but the box model is an essential part of CSS and something 97 00:05:20,794 --> 00:05:22,504 that you really do have to know about. 98 00:05:22,564 --> 00:05:25,564 So thank you for joining me in this video and I'll see you in the next one.