Visualizing the Box Model and Computed styles

Next to the Styles pane, 0:00 the Computed pane displays exactly how the browser is computing your styles. 0:02 In other words, it lets you see the final set of CSS properties the browser is 0:06 applying to the selected element. 0:10 As you learned earlier, CSS properties can be applied to an element from 0:12 different rule sets, even rules defined in the browser's default style sheet. 0:15 Now some properties, as you know, 0:20 get inherited from ancestor elements while others get overwritten. 0:21 So the Computed pane gathers all the properties the browser's actually 0:26 using to style the element into an alphabetical list of properties. 0:30 And it comes in handy when you notice that an element has many 0:34 overwritten styles, right? 0:38 So instead of searching through the styles pane to determine 0:39 which properties are being applied, you click over to the Computed pane and 0:42 it will show you exactly what the browser sees. 0:46 So for example, selecting the header shows a list of all the background properties 0:49 the browser is applying to the header. 0:53 Clicking the arrow to the right of a property takes you 0:56 back to its original source in the styles tab. 0:59 Now before applying a length value, like an rem or 1:03 percentage to an element, the browser computes it to a pixel value. 1:07 So in the Computed pane, 1:12 you're able to see computed pixel values applied to elements. 1:13 For instance, the header's padding values are set using units, 1:17 but we can see here that the computed values are 16 pixels for 1:22 the bottom left and right sides and 40 pixels for the top. 1:26 One of the most important areas of the Computed pane is the box panel diagram at 1:33 the top. 1:37 Each element takes up a certain amount of space on a page and 1:38 the CSS box model is what determines the amount of space each element takes up. 1:41 So the diagram here shows you a representation of an element's box model 1:46 and how much space it's occupying. 1:50 It lets you quickly examine and edit the content, padding, border, and 1:52 margin areas of an element. 1:56 So here, we see that the headers content area is 868 by 224 pixels. 1:58 The browser also highlights the selected box model area in blue and 2:04 the padding area is 40 pixels for the top and 16 pixels for 2:08 the bottom left and right sides. 2:12 This area is highlighted in green. 2:13 All values in the box model diagram are editable, just click on them. 2:16 For instance, I'll select the input element then click inside 2:20 the height value in the content area. 2:25 I'll press the up arrow key to increase the height of the content area and 2:27 the down key to decrease it. 2:32 So being able to see exactly how much space an element is taking up 2:37 on the page is going to help you debug layout issues faster. 2:41 For example, somewhere in my CSS I could have 2:46 a troublesome rule like li last-child, margin 0. 2:51 And when I go back and add guests to the list, I notice that the guest 2:57 item on the far right doesn't quite align with the other items. 3:03 Well I can select the item and examine its box bottom parameters. 3:08 And this shows me that the item does not have a margin area even though it should, 3:12 and I see all the margin values in the list of computed styles set to zero. 3:17 Clicking over to the Styles pane shows me that the li last-child rule is 3:26 in fact overriding the margin value set for guest in this media query. 3:31 And turning this margin 0 property off fixes the problem. 3:36 Now I can simply go to my CSS, online 13, delete the rule, and that resolves it. 3:44