1 00:00:00,650 --> 00:00:02,080 Next to the Styles pane, 2 00:00:02,080 --> 00:00:06,650 the Computed pane displays exactly how the browser is computing your styles. 3 00:00:06,650 --> 00:00:10,370 In other words, it lets you see the final set of CSS properties the browser is 4 00:00:10,370 --> 00:00:12,410 applying to the selected element. 5 00:00:12,410 --> 00:00:15,970 As you learned earlier, CSS properties can be applied to an element from 6 00:00:15,970 --> 00:00:20,250 different rule sets, even rules defined in the browser's default style sheet. 7 00:00:20,250 --> 00:00:21,720 Now some properties, as you know, 8 00:00:21,720 --> 00:00:26,060 get inherited from ancestor elements while others get overwritten. 9 00:00:26,060 --> 00:00:30,620 So the Computed pane gathers all the properties the browser's actually 10 00:00:30,620 --> 00:00:34,350 using to style the element into an alphabetical list of properties. 11 00:00:34,350 --> 00:00:38,050 And it comes in handy when you notice that an element has many 12 00:00:38,050 --> 00:00:39,330 overwritten styles, right? 13 00:00:39,330 --> 00:00:42,460 So instead of searching through the styles pane to determine 14 00:00:42,460 --> 00:00:46,050 which properties are being applied, you click over to the Computed pane and 15 00:00:46,050 --> 00:00:49,140 it will show you exactly what the browser sees. 16 00:00:49,140 --> 00:00:53,620 So for example, selecting the header shows a list of all the background properties 17 00:00:53,620 --> 00:00:56,340 the browser is applying to the header. 18 00:00:56,340 --> 00:00:59,240 Clicking the arrow to the right of a property takes you 19 00:00:59,240 --> 00:01:01,930 back to its original source in the styles tab. 20 00:01:03,270 --> 00:01:07,740 Now before applying a length value, like an rem or 21 00:01:07,740 --> 00:01:12,230 percentage to an element, the browser computes it to a pixel value. 22 00:01:12,230 --> 00:01:13,642 So in the Computed pane, 23 00:01:13,642 --> 00:01:17,291 you're able to see computed pixel values applied to elements. 24 00:01:17,291 --> 00:01:22,018 For instance, the header's padding values are set using units, 25 00:01:22,018 --> 00:01:26,253 but we can see here that the computed values are 16 pixels for 26 00:01:26,253 --> 00:01:30,350 the bottom left and right sides and 40 pixels for the top. 27 00:01:33,205 --> 00:01:37,798 One of the most important areas of the Computed pane is the box panel diagram at 28 00:01:37,798 --> 00:01:38,370 the top. 29 00:01:38,370 --> 00:01:41,733 Each element takes up a certain amount of space on a page and 30 00:01:41,733 --> 00:01:46,660 the CSS box model is what determines the amount of space each element takes up. 31 00:01:46,660 --> 00:01:50,700 So the diagram here shows you a representation of an element's box model 32 00:01:50,700 --> 00:01:52,760 and how much space it's occupying. 33 00:01:52,760 --> 00:01:56,270 It lets you quickly examine and edit the content, padding, border, and 34 00:01:56,270 --> 00:01:58,380 margin areas of an element. 35 00:01:58,380 --> 00:02:04,030 So here, we see that the headers content area is 868 by 224 pixels. 36 00:02:04,030 --> 00:02:08,100 The browser also highlights the selected box model area in blue and 37 00:02:08,100 --> 00:02:12,310 the padding area is 40 pixels for the top and 16 pixels for 38 00:02:12,310 --> 00:02:13,890 the bottom left and right sides. 39 00:02:13,890 --> 00:02:16,220 This area is highlighted in green. 40 00:02:16,220 --> 00:02:20,680 All values in the box model diagram are editable, just click on them. 41 00:02:20,680 --> 00:02:25,036 For instance, I'll select the input element then click inside 42 00:02:25,036 --> 00:02:27,627 the height value in the content area. 43 00:02:27,627 --> 00:02:32,086 I'll press the up arrow key to increase the height of the content area and 44 00:02:32,086 --> 00:02:33,850 the down key to decrease it. 45 00:02:37,207 --> 00:02:41,095 So being able to see exactly how much space an element is taking up 46 00:02:41,095 --> 00:02:44,700 on the page is going to help you debug layout issues faster. 47 00:02:46,799 --> 00:02:51,103 For example, somewhere in my CSS I could have 48 00:02:51,103 --> 00:02:56,213 a troublesome rule like li last-child, margin 0. 49 00:02:57,804 --> 00:03:03,307 And when I go back and add guests to the list, I notice that the guest 50 00:03:03,307 --> 00:03:08,940 item on the far right doesn't quite align with the other items. 51 00:03:08,940 --> 00:03:12,960 Well I can select the item and examine its box bottom parameters. 52 00:03:12,960 --> 00:03:17,920 And this shows me that the item does not have a margin area even though it should, 53 00:03:17,920 --> 00:03:21,750 and I see all the margin values in the list of computed styles set to zero. 54 00:03:26,553 --> 00:03:31,208 Clicking over to the Styles pane shows me that the li last-child rule is 55 00:03:31,208 --> 00:03:36,370 in fact overriding the margin value set for guest in this media query. 56 00:03:36,370 --> 00:03:39,650 And turning this margin 0 property off fixes the problem. 57 00:03:44,419 --> 00:03:50,062 Now I can simply go to my CSS, online 13, delete the rule, and that resolves it.