1 00:00:01,652 --> 00:00:03,071 Welcome back. 2 00:00:03,071 --> 00:00:05,177 I will now quickly go over yet another 3 00:00:05,177 --> 00:00:07,677 very important concept in CSS. 4 00:00:08,543 --> 00:00:09,710 The box model. 5 00:00:11,967 --> 00:00:13,000 So. 6 00:00:13,000 --> 00:00:17,167 Basically, all HTML elements can be seen as boxes. 7 00:00:18,180 --> 00:00:19,602 What the box model does 8 00:00:19,602 --> 00:00:21,882 is to allow us to define space 9 00:00:21,882 --> 00:00:23,273 between elements 10 00:00:23,273 --> 00:00:26,824 and to add a border around elements. 11 00:00:26,824 --> 00:00:29,308 The box model consists of margins, 12 00:00:29,308 --> 00:00:33,666 padding, borders and actual content of the box. 13 00:00:33,666 --> 00:00:35,249 For instance, text. 14 00:00:36,549 --> 00:00:41,293 This image shows very well how the box model works. 15 00:00:41,293 --> 00:00:42,846 So, 16 00:00:42,846 --> 00:00:46,723 the content is where text and images appear. 17 00:00:46,723 --> 00:00:50,823 Padding is like a transparent area around the content, 18 00:00:50,823 --> 00:00:52,656 but inside of the box. 19 00:00:53,645 --> 00:00:55,193 The border of the box 20 00:00:55,193 --> 00:00:57,631 goes around the padding and the content. 21 00:00:57,631 --> 00:01:00,131 It may be transparent, or not. 22 00:01:01,135 --> 00:01:05,543 And finally, the margin is the space between boxes. 23 00:01:05,543 --> 00:01:08,126 Now, padding, margin and border 24 00:01:09,368 --> 00:01:11,745 are properties in CSS, 25 00:01:11,745 --> 00:01:14,939 and can be specified for the entire box 26 00:01:14,939 --> 00:01:17,735 or for individual sides. 27 00:01:17,735 --> 00:01:19,985 Top, bottom, left or right. 28 00:01:21,439 --> 00:01:23,772 We'll use all of them later. 29 00:01:25,970 --> 00:01:28,757 The box model also allows us to set 30 00:01:28,757 --> 00:01:32,574 the height and the width of an element. 31 00:01:32,574 --> 00:01:36,145 Now, the annoying thing about the standard box model 32 00:01:36,145 --> 00:01:37,939 that I just showed you 33 00:01:37,939 --> 00:01:39,775 is that you just set the height 34 00:01:39,775 --> 00:01:42,178 and the width of the content. 35 00:01:42,178 --> 00:01:44,595 Not of the entire box itself. 36 00:01:45,577 --> 00:01:48,833 This means that padding, margin and border 37 00:01:48,833 --> 00:01:53,578 will be added to the height and width we specify. 38 00:01:53,578 --> 00:01:56,970 Which is actually not what we want. 39 00:01:56,970 --> 00:01:58,544 But fortunately, 40 00:01:58,544 --> 00:02:00,850 we have a good solution for that. 41 00:02:00,850 --> 00:02:03,661 There is this very useful CSS property 42 00:02:03,661 --> 00:02:05,161 called box-sizing. 43 00:02:06,177 --> 00:02:09,053 If we set box-sizing to border-box, 44 00:02:09,053 --> 00:02:11,021 the height and the width 45 00:02:11,021 --> 00:02:14,320 will be defined for the entire box. 46 00:02:14,320 --> 00:02:16,737 We will use this in a second. 47 00:02:18,393 --> 00:02:20,047 'Cause there is one last thing 48 00:02:20,047 --> 00:02:23,190 I need to tell you about the box model. 49 00:02:23,190 --> 00:02:26,193 In HTML, there are block elements 50 00:02:26,193 --> 00:02:27,860 and inline elements. 51 00:02:28,949 --> 00:02:32,432 Block elements use the full width of the browser 52 00:02:32,432 --> 00:02:34,463 and force line breaks. 53 00:02:34,463 --> 00:02:38,630 Headings and paragraphs are examples of block elements. 54 00:02:40,889 --> 00:02:44,494 And inline elements don't do any of that. 55 00:02:44,494 --> 00:02:45,650 For instance, 56 00:02:45,650 --> 00:02:48,733 images, links, strong and em elements 57 00:02:50,076 --> 00:02:52,076 are all inline elements. 58 00:02:53,139 --> 00:02:54,890 What's important about them 59 00:02:54,890 --> 00:02:59,057 is that you can either set their height or their width. 60 00:02:59,948 --> 00:03:02,485 But enough with theory lectures. 61 00:03:02,485 --> 00:03:05,347 Let's get our hands dirty with what we just learned 62 00:03:05,347 --> 00:03:07,430 and get back to brackets. 63 00:03:09,198 --> 00:03:10,543 As you can see, 64 00:03:10,543 --> 00:03:12,342 on our web page 65 00:03:12,342 --> 00:03:14,619 here in Google Chrome, 66 00:03:14,619 --> 00:03:18,407 there are already some margins between elements. 67 00:03:18,407 --> 00:03:20,208 For example this one here, 68 00:03:20,208 --> 00:03:21,291 and this one. 69 00:03:22,817 --> 00:03:24,828 It all full of margins, 70 00:03:24,828 --> 00:03:25,749 already. 71 00:03:25,749 --> 00:03:28,061 And that's because all browsers 72 00:03:28,061 --> 00:03:29,806 add some default margins 73 00:03:29,806 --> 00:03:32,289 if we don't specify any. 74 00:03:32,289 --> 00:03:36,127 So let's start by remove the default values. 75 00:03:36,127 --> 00:03:37,307 And to do that, 76 00:03:37,307 --> 00:03:38,848 we create some rules 77 00:03:38,848 --> 00:03:41,891 that will affect all elements on our web page, 78 00:03:41,891 --> 00:03:44,224 using the asterisk selector. 79 00:03:45,663 --> 00:03:47,413 Which goes like this. 80 00:03:48,400 --> 00:03:50,688 So we just type this. 81 00:03:50,688 --> 00:03:53,188 Now all elements are affected. 82 00:03:54,358 --> 00:03:57,858 That's why you have these blue boxes here, 83 00:03:59,094 --> 00:04:01,094 around all the elements. 84 00:04:02,310 --> 00:04:04,344 This is a way of brackets showing us 85 00:04:04,344 --> 00:04:06,795 that all these elements are affected 86 00:04:06,795 --> 00:04:08,212 by this selector. 87 00:04:09,218 --> 00:04:13,002 Now, here we've set all margins and paddings to 0. 88 00:04:13,002 --> 00:04:14,691 And that's how it works. 89 00:04:14,691 --> 00:04:16,441 Just write margin: 0; 90 00:04:19,204 --> 00:04:20,954 and also padding: 0;. 91 00:04:24,866 --> 00:04:29,259 So you see, all the margins completely disappeared. 92 00:04:29,259 --> 00:04:32,683 Now, do you remember the box-sizing property? 93 00:04:32,683 --> 00:04:34,588 We want to set it to border-box 94 00:04:34,588 --> 00:04:35,968 for all elements. 95 00:04:35,968 --> 00:04:37,945 And this is the right place 96 00:04:37,945 --> 00:04:39,932 to do exactly that. 97 00:04:39,932 --> 00:04:40,765 So. 98 00:04:41,852 --> 00:04:43,769 Let's write box-sizing, 99 00:04:45,482 --> 00:04:47,732 and then choose border-box. 100 00:04:50,820 --> 00:04:52,287 Save it, 101 00:04:52,287 --> 00:04:53,287 and alright. 102 00:04:54,777 --> 00:04:58,027 So, no margins and no paddings anymore. 103 00:04:59,079 --> 00:05:01,216 Now, I think we should add some margins 104 00:05:01,216 --> 00:05:03,713 to some of the elements. 105 00:05:03,713 --> 00:05:05,342 First, I would say 106 00:05:05,342 --> 00:05:09,549 that the main heading needs some margin, right? 107 00:05:09,549 --> 00:05:12,099 This main heading right here. 108 00:05:12,099 --> 00:05:13,390 So remember. 109 00:05:13,390 --> 00:05:16,723 Margin is the white space between boxes. 110 00:05:17,982 --> 00:05:20,901 We want some margin these two headings, 111 00:05:20,901 --> 00:05:23,494 the h1 and the h2 heading. 112 00:05:23,494 --> 00:05:27,161 So we add a margin-bottom to the h1 element. 113 00:05:28,674 --> 00:05:31,338 So if we remember, I said we could specify 114 00:05:31,338 --> 00:05:34,921 the margins to all the sides of an element. 115 00:05:36,596 --> 00:05:37,513 And so now, 116 00:05:39,519 --> 00:05:42,852 I will specify the margin at the bottom. 117 00:05:45,886 --> 00:05:47,886 And let's put 20px here. 118 00:05:51,129 --> 00:05:55,296 That looks like a reasonable amount of white space here. 119 00:06:00,282 --> 00:06:03,904 And now the same thing for the secondary headings. 120 00:06:03,904 --> 00:06:07,011 Because, you know, I also don't like 121 00:06:07,011 --> 00:06:10,522 that there's no space between the h2 element 122 00:06:10,522 --> 00:06:12,105 and the paragraphs. 123 00:06:13,521 --> 00:06:16,600 So it's again, margin-bottom. 124 00:06:16,600 --> 00:06:19,850 And here, I think 10px might be enough. 125 00:06:22,051 --> 00:06:23,211 Okay. 126 00:06:23,211 --> 00:06:27,028 That looks much better, don't you think? 127 00:06:27,028 --> 00:06:30,347 Finally, I would like to add some margin 128 00:06:30,347 --> 00:06:32,514 after the main paragraphs. 129 00:06:33,503 --> 00:06:34,642 So if you remember, 130 00:06:34,642 --> 00:06:36,237 the main paragraphs are 131 00:06:36,237 --> 00:06:37,497 this one 132 00:06:37,497 --> 00:06:39,125 and this one. 133 00:06:39,125 --> 00:06:42,348 And we defined it in the lecture before, 134 00:06:42,348 --> 00:06:44,181 using this class here. 135 00:06:45,892 --> 00:06:47,892 So again, margin-bottom. 136 00:06:49,404 --> 00:06:51,154 And let's do it 20px. 137 00:06:52,847 --> 00:06:56,270 So we get some nice spacing here. 138 00:06:56,270 --> 00:07:00,005 So it looks a little bit cleaner right now. 139 00:07:00,005 --> 00:07:02,157 And that's it for this lecture. 140 00:07:02,157 --> 00:07:05,338 I hope you learned a lot about the box model. 141 00:07:05,338 --> 00:07:07,743 Which is really, really important. 142 00:07:07,743 --> 00:07:09,738 So if you didn't, just go back 143 00:07:09,738 --> 00:07:11,431 and look at it again. 144 00:07:11,431 --> 00:07:13,022 Because in the next lecture, 145 00:07:13,022 --> 00:07:14,629 we will really need it 146 00:07:14,629 --> 00:07:18,808 because we will start to build a simple layout, 147 00:07:18,808 --> 00:07:21,225 where we will use the concept 148 00:07:22,096 --> 00:07:24,949 that I showed you in this lecture. 149 00:07:24,949 --> 00:07:25,954 So, 150 00:07:25,954 --> 00:07:27,121 see you there.