WEBVTT 0 00:13.290 --> 00:14.400 Pretty cool right? 1 00:14.530 --> 00:16.950 Haha, I just noticed I spelled "example" wrong. 2 00:16.950 --> 00:18.030 "ExceptMolly". 3 00:18.750 --> 00:19.260 Anyway. 4 00:19.260 --> 00:20.190 You know what I mean. 5 00:20.220 --> 00:21.510 Anyway, let's continue. 6 00:21.710 --> 00:23.910 i just wanted to show you that very very quick example. 7 00:23.910 --> 00:26.020 You might be thinking, what is the box model? 8 00:26.040 --> 00:32.370 Well, when laying out a document, the browser's rendering engine represents each element as a rectangular 9 00:32.370 --> 00:36.840 box according to the standard CSS basic box model. 10 00:36.840 --> 00:41.830 And from this, CSS determines the size, position and properties of these boxes. 11 00:41.850 --> 00:43.860 I keep talking about boxes, but how does that work? 12 00:43.860 --> 00:51.690 Well, every box is composed of four parts or areas, and these areas or parts are defined by their 13 00:51.690 --> 00:53.250 respective edges. 14 00:53.280 --> 00:53.960 What do I mean? 15 00:53.970 --> 00:59.730 Well, firstly, let's start off at the one edge, the one part, and this is the content area. 16 00:59.760 --> 01:05.070 This is bounded by the content edge, and it contains the real content of your element, such as the actual 17 01:05.070 --> 01:07.200 text or the image or the video player. 18 01:07.230 --> 01:10.840 Its dimensions are the content width and the content height. 19 01:10.870 --> 01:11.800 That's the content. 20 01:11.800 --> 01:12.670 That's one area. 21 01:12.700 --> 01:13.930 What's another area? 22 01:14.200 --> 01:15.100 That's right. 23 01:15.100 --> 01:15.820 Padding. 24 01:15.820 --> 01:17.020 What's another area? 25 01:17.050 --> 01:17.800 Border. 26 01:17.830 --> 01:18.640 You've got it. 27 01:18.640 --> 01:20.470 You probably know these all already, by the way. 28 01:20.500 --> 01:22.090 The final is what? 29 01:22.600 --> 01:23.410 Margin. 30 01:23.410 --> 01:24.010 That's right. 31 01:24.010 --> 01:24.610 So there you go. 32 01:24.610 --> 01:27.730 Every box is made up of these four parts. 33 01:28.180 --> 01:29.080 Have you got it? 34 01:29.110 --> 01:30.220 Pretty intuitive, right? 35 01:30.220 --> 01:35.230 And as I mentioned, that content area in the middle contains the real content of the element. 36 01:35.230 --> 01:40.840 And yes, we can affect its sizing with the width, min-width, max-width, etc etc 37 01:40.840 --> 01:41.350 properties. 38 01:41.350 --> 01:46.810 It's very, very easy, but this will target the content area itself, not necessarily the padding, 39 01:46.810 --> 01:47.920 border or margin. 40 01:48.130 --> 01:48.970 Remember that. 41 01:49.530 --> 01:52.370 So how does this box sizing property work and what is the default? 42 01:52.380 --> 01:55.140 Well, there are two values it can take. 43 01:55.230 --> 01:58.200 We've got the content box, and this is the default. 44 01:58.710 --> 02:03.060 And when the content box is set, what does that mean? 45 02:03.060 --> 02:12.000 Well, it just means if you set an element width to 100 pixels, the elements content box will be 100 46 02:12.000 --> 02:13.470 pixels wide. 47 02:13.470 --> 02:18.990 This means that if you add any width of a border or padding, that's going to be added to the final 48 02:18.990 --> 02:22.470 rendered width, making the element wider than 100 pixels. 49 02:22.470 --> 02:23.700 So it's kind of counterintuitive. 50 02:23.730 --> 02:31.050 You might want your div tag to be 100 pixels, but once you add padding and margin, it will be more. 51 02:31.230 --> 02:37.320 So the good news is to get around this we can set the box sizing property to border-box and this just 52 02:37.320 --> 02:42.030 means the browser is going to account for any border and padding in the values that you specify in the 53 02:42.030 --> 02:43.140 width and height. 54 02:43.140 --> 02:50.710 For example, if you set an element width to 100 pixels, that 100 pixels will include any border or 55 02:50.710 --> 02:57.400 padding you've added, and the content box will shrink to absorb that extra width. 56 02:57.640 --> 03:02.640 And this makes it very much easier to size your elements and widgets. 57 03:02.650 --> 03:04.280 Pretty straightforward, right? 58 03:04.300 --> 03:05.470 I hope it's making sense. 59 03:05.470 --> 03:10.360 So just remember, this box-sizing property can be very useful for you when you're styling your form. 60 03:10.600 --> 03:16.810 But it's not to say that you never want to set your box sizing to content-box. When you're using position 61 03:16.810 --> 03:18.340 relative or position absolute 62 03:18.340 --> 03:24.430 for example, sometimes it's nice to use box-sizing of content-box because it allows the positioning 63 03:24.430 --> 03:30.760 values to be relative to the content and independent of changes to border and padding, which is sometimes 64 03:30.760 --> 03:34.800 desirable. When it comes to dev, there's not one rule that fits all. 65 03:34.810 --> 03:38.140 You kind of have to just approach each problem as unique. 66 03:38.170 --> 03:42.850 Yes, mostly we're going to be setting the border sizing to border-box, but not always. 67 03:43.450 --> 03:44.080 Woo hoo! 68 03:44.680 --> 03:46.300 Well done for getting through this. 69 03:46.330 --> 03:47.500 I hope you're having a lot of fun. 70 03:47.500 --> 03:49.330 I'm just giving you a little tips along the way 71 03:49.330 --> 03:55.750 when it comes to CSS. I'm having a lot of fun, but I want us to now talk a little bit about pseudo 72 03:55.750 --> 03:58.450 classes in the upcoming lectures. 73 03:58.450 --> 03:59.470 I'll see you now.