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.